• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Анимации с transform при помощи CSS (Анимация элементы с изменением width и height)
Анимации с transform при помощи CSS
Kosten
Дата: Воскресенье, 2018-08-19, 20:01 | Сообщение 1
Администраторы
Сообщений:18498
Награды: 55


Интересные анимации могут быть созданы с помощью CSS3 с помощью преобразований и переходов. Преобразования используются для изменения элемента из одного состояния в другое. Примерами могут быть вращающиеся, перемещающиеся, искажающие и масштабирующие элементы. Без перехода, преобразованный элемент резко изменился бы из одного состояния в другое. Чтобы предотвратить это, можно добавить переход, чтобы вы могли контролировать изменение, делая его более гладким.

Есть некоторые удивительные примеры трансформаций и переходов CSS, и, хотя вы можете быть потрясены ими, есть хороший шанс, что вы также перегружены и немного запуганы! Этот учебник вернет вас к самым основам. Шаг за шагом мы будем создавать некоторые фундаментальные переходные движения CSS3.

Предпочтительно использовать свойство transform(), так как оно обеспечивает более плавные переходы и делает ваши намерения более понятными при чтении кода.

Хотим анимировать мяч и сдвигать его вправо. Вместо того, чтобы изменять значение left, лучше использовать translateX():



CSS

Код
.ball {
    left: 50px;
    transition: 0.4s ease-out;
}

/* Не круто */
.ball.slide-out {
    left: 500px;
}

/* Круто */
.ball.slide-out {
    transform: translateX(450px);
}


Базовая анимация с ключевыми кадрами

Код
<div class="container">
  <div class="wave"></div>
  <div class="underwater">
    <div class="submarine move-down fadeInDown">
    </div>    
    <div class="moving-content move-down text-delay fadeInDownText">
      <h2>Симпатичная подводная лодка</h2>
      
      <p>Индикатор выполнения - отличный пример того, как безье может настроить время анимации. С преобразованиями, переходами и многими другими параметрами пользовательская анимация может быть легко создана. Надеемся, что эти основные примеры анимации CSS3 помогли вам увидеть, какие существуют другие возможности.</p>
    </div>
</div>


CSS

Код
@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: none;
  }

  25% {
    opacity: 1;
    transform: translate(0, 15px);
  }
  
  50% {
    opacity: 1;
    transform: translate(0, 30px);
  }
  
  75% {
    opacity: 1;
    transform: translate(0, 15px);
  }
  
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInDownText {
  0% {
    opacity: .8;
    transform: none;
  }

  100% {
    opacity: 1;
    transform: translate(0, 35px);
  }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.fadeInDownText {
    -webkit-animation-name: fadeInDownText;
    animation-name: fadeInDownText;
}

.container {
  max-width: 60%;
  margin: 0 auto;
}

.underwater {
  position: relative;
  min-height: 600px;
  background-color: #4fc3da;
}

.move-down{
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 15;
    animation-iteration-count: 15;
}

.text-delay {
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
    -webkit-animation-iteration-count: 15;
    animation-iteration-count: 15;
}

.submarine {
  height: 100px;
  width: 100px;
  margin: 0 auto;
  background: url("http://www.abbeyjfitzgerald.com/wp-content/uploads/2017/03/little-submarine.svg") no-repeat;
}

.moving-content {
  font-family: 'Raleway', sans-serif;
  width: 80%;
  margin: 30px auto;
  text-align: center;
  color: white;
}

.moving-content h2 {
  color: #4d275f;
}

.wave{
  background-color: #afdee8;
  height: 50px;
  position: relative;
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 10px;
  background-size: 20px 20px;
  background-image:
    radial-gradient(circle at 10px -5px, transparent 12px, #4fc3da 13px);
}
.wave::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 15px;
  background-size: 80px 20px;
  background-image:
    radial-gradient(circle at 30px 15px, #4fc3da 12px, transparent 13px);
}


Демонстрация

Введение в преобразования CSS

Эффект CSS Transform заключается в изменении внешнего вида элемента в браузере посредством перевода, вращения или других средств. При определении в таблице стилей преобразования применяются при визуализации страницы, поэтому на самом деле вы не видите никаких анимации. Преобразования могут также применяться как наведение на мышь или аналогичный эффект, который вы можете увидеть в следующем разделе.

Предложение Apple для CSS Transformations требует возможности изменить перспективу и работать в трех измерениях, но это еще далеко. Даже продемонстрированные здесь функции не будут отображаться в других браузерах, пока они не будут одобрены органом по стандартизации, которые все еще борются с модулями CSS3.



HTML

Код
<div class="aredsabukolag" style="transform: translate(3em,0);">ZORNET 1</div>
<div class="aredsabukolag" style="transform: rotate(30deg); border-color: red;">ZORNET 2</div>
<div class="aredsabukolag" style="transform: translate(-3em,1em);">ZORNET 3</div>
<div class="aredsabukolag" style="transform: scale(2);">ZORNET 4</div>
<div style="clear: left;"></div>


CSS

Код
.aredsabukolag {
    float: left;
    margin: 4em 1em;
    width: 100px;
    height: 57px;
    border: 2px solid #0c6d0c;
    background-color: #f9f6f6;
    line-height: 57px;
    text-align: center;
}


Следует отметить, что текст по-прежнему можно выбрать в преобразованных элементах, даже когда они повернуты, и что масштабирование элемента влияет на свойства, включая ширину и размер шрифта, а не только размеры окна.
Прикрепления: 3358823.png(12.9 Kb) · 6588406.png(65.9 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Анимации с transform при помощи CSS (Анимация элементы с изменением width и height)
  • Страница 1 из 1
  • 1
Поиск: