Свойства анимации CSS3

внешний интерфейс JavaScript анимация CSS

Переход, анимация и трансформация — три важных свойства анимации в CSS3, в основном о них рассказывается в этой статье.

1. переход

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

transition ：transition-property || transition-duration || transition-timing-function || transition-delay;

transitionВ основном он содержит четыре значения атрибута: атрибут, который выполняет преобразование:transition-property, продолжительность превращения:transition-duration, за период продолжения скорость трансформации изменяется:transition-timing-function, время задержки преобразования:transition-delay.

1. transition-property

transition-property: none || all || property;

transition-propertyиспользуется для указания того, что при изменении одного из атрибутов элементаtransitionЭффект.

none: ни один атрибут не получит эффекта перехода;

все: все свойства получат эффекты перехода,также его значение по умолчанию;

свойство: разделенный запятыми список имен свойств CSS, которые определяют эффект перехода, к которому нужно применить.

2. transition-duration

transition-duration: time;

transition-durationОн используется для указания продолжительности процесса преобразования элемента.Время значения является числовым значением, а единицей измерения являются с (секунды) или мс (миллисекунды).Значение по умолчанию равно 0, то есть преобразование происходит мгновенно.

3. transition-timing-function

transition-timing-function: linear || ease || ease-in || ease-out || ease-in-out || cubic-
bezier(n,n,n,n);

Конкретные значения вышеуказанных значений следующие:

стоимость описывать
linear Определяет эффект перехода, который начинается и заканчивается с одинаковой скоростью.
ease Определяет эффект перехода, который начинается медленно, затем ускоряется, а затем медленно заканчивается.
ease-in Определяет эффект перехода, который начинается медленно.
ease-out Определяет эффект перехода, который заканчивается медленно.
ease-in-out Определяет эффект перехода, который начинается и заканчивается медленно.
cubic-bezier(n,n,n,n) Определите собственное значение в кубической функции Безье. Возможные значения — числа от 0 до 1.

4. transition-delay

transition-delay: time;

transition-delayОн используется для указания времени, когда анимация начинает выполняться, то есть сколько времени требуется, чтобы начать выполняться после изменения значения атрибута элемента.transitionЭффект, его значение time — числовое значение, единица измерения — s (секунды) или ms (миллисекунды), размер по умолчанию — «0», то есть преобразование выполняется сразу без задержки.

5. Примеры

HTML-код

<div class="one"></div>

css-код

.one {
        width: 100px;
        height: 100px;
        margin: 200px auto;
        background-color: #cd4a48;
        -webkit-transition: width, height 2s ease;
        -moz-transition: width, height 2s ease;
        -ms-transition: width, height 2s ease;
        -o-transition: width, height 2s ease;
        transition: width, height 2s ease;
    }

    .one:hover {
        width: 300px;
        height: 300px;
    }

Эффект:

6. Меры предосторожности

  • Не все свойства CSS поддерживаютсяtransition, просмотр полного списказдесь, а конкретныеЭффект.
  • transitionНеобходимо четко знать конкретные значения начального состояния и конечного состояния, чтобы рассчитать промежуточное состояние. Например, высота изменяется с 0 пикселей на 100 пикселей,transitionПромежуточные состояния можно рассчитать. но,transitionНет никакого способа выяснить промежуточное состояние между 0px и auto, то есть, если начало или конец установлены в height:auto, анимации не будет.
  • transitionТребуется событие для запуска, поэтому оно не может произойти автоматически при загрузке страницы.
  • transitionЭто однократно и не может быть повторено, если не срабатывает повторно.

2. Анимация

отличный отtransitionМожно определить только первое и два последних состояния,animationМожно определить любое количество ключевых кадров, что позволяет создавать более сложные эффекты анимации.

animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction

animationВ основном он включает в себя шесть атрибутов, конкретные значения которых следующие:

стоимость описывать
animation-name Задает имя ключевого кадра, которое необходимо привязать к селектору. .
animation-duration Задает время в секундах или миллисекундах для завершения анимации.
animation-timing-function Определяет кривую скорости для анимации.
animation-delay Определяет задержку перед запуском анимации, значение по умолчанию равно 0.
animation-iteration-count Указывает, сколько раз должна воспроизводиться анимация, значение по умолчанию — 1.
animation-direction Указывает, должна ли анимация воспроизводиться в обратном порядке, по умолчанию — в прямом.

1. keyframe

ПредставляемanimationПеред конкретным использованием мы должны сначала ввести ключевой кадр.

@keyframesПозвольте разработчику управлять промежуточными звеньями анимации CSS, указав стиль ключевого кадра (или точку задержки), который должен отображаться в определенной точке анимации. Это позволяет разработчикам контролировать больше деталей анимации, а не позволять браузеру обрабатывать все автоматически.

Чтобы использовать ключевые кадры, создайте именованный@keyframesправила последующего использованияanimation-nameэто свойство для вызова указанного@keyframes. каждый@keyframesПравило содержит несколько ключевых кадров, то есть оператор блока стиля.Каждый ключевой кадр имеет процентное значение в качестве имени, которое представляет, на каком этапе во время анимации запускается стиль, содержащийся в этом кадре.

Порядок записи ключевых кадров не требуется, они будут запускаться только в порядке возрастания в соответствии с процентным соотношением.

@keyframes animationname {keyframes-selector {css-styles;}}

Конкретное значение следующее:

стоимость описывать
animationname Необходимый. Определяет имя анимации.
keyframes-selector Необходимый. Процент продолжительности анимации. Допустимые значения: 0-100%от (аналогично 0%) до (аналогично 100%)
css-styles Необходимый. Одно или несколько допустимых свойств стиля CSS.

Пример:

@keyframes identifier {
  0% { top: 0; left: 0px}
  50% { top: 30px; left: 20px; }
  100% { top: 0; left: 30px;}
}

2. Пример

HTML-код

<div class="one"></div>

css-код

.one {
        width: 100px;
        height: 100px;
        margin: 200px auto;
        background-color: #cd4a48;
        position: relative;
        animation: moveHover 5s ease-in-out 0.2s;

    }


    @keyframes moveHover {
        0% {
            top: 0px;
            left: 0px;
            background: #cd4a48;
        }
        50% {
            top: 200px;
            left: 200px;
            background:#A48992;
        }
        100% {
            top: 350px;
            left:350px;
            background: #FFB89A;
        }
    }

Эффект:

3. Другие свойства

В дополнение к шести основным атрибутам, использованным выше, вводятся два дополнительных атрибута.

animation-fill-mode

После того, как анимация закончится, она немедленно вернется из конечного состояния в начальное состояние. Если вы хотите сохранить анимацию в конечном состоянии, вам нужно использоватьanimation-fill-modeАтрибуты.

animation-fill-mode: none || backwards || both
  • none: значение по умолчанию, возвращающее в состояние, когда анимация не запускалась.
  • вперед: когда анимация завершена, сохраните последнее значение свойства (определенное в последнем ключевом кадре).
  • назад: вanimation-delayНачальное значение свойства (определенное в первом ключевом кадре) применяется перед отображением анимации в течение указанного периода времени.
  • оба: согласноanimation-directionПоочередно применяйте прямые и обратные правила.

animation-play-state

Иногда во время воспроизведения анимации она внезапно останавливается. На этом этапе поведение по умолчанию — вернуться к началу анимации.

Если вы хотите, чтобы анимация оставалась в том состоянии, в котором она была, когда она внезапно завершилась, используйтеanimation-play-stateАтрибуты.

animation-play-state:running || paused

animation-play-stateВ основном используется для управления состоянием воспроизведения анимации элемента. У него есть два основных значения: «Работает» и «Приостановлено», где «Работает» — это значение по умолчанию. Воспроизводимая анимация останавливается с помощью paused, а приостановленная анимация воспроизводится с помощью run.Это свойство в настоящее время редко поддерживается ядром.

Три, трансформация

transformдеформация, в основном в том числевращать вращать,перекос,масштаб масштабаа такжемобильный переводтак же какМатричная матрица деформации.

transform: none || transform-functions

none: указывает, что он не преобразуется в; функция преобразования представляет одну или несколько функций преобразования, разделенных пробелами; другими словами, мы также используем различные атрибуты элемента операций преобразования, такие как поворот, масштабирование, перевод три.

Основные функции преобразования функций трансформации являются следующими:

1. translate

стоимость описывать
translate(x,y) Определите 2D-преобразования.
translate3d(x,y,z) Определение 3D-преобразований.
translateX(x) Чтобы определить преобразование, просто используйте значение оси X.
translateY(y) Чтобы определить преобразование, просто используйте значение оси Y.
translateZ(z) Чтобы определить 3D-преобразование, просто используйте значение оси Z.

2. scale

стоимость описывать
scale(x,y) Определяет преобразование 2D-масштабирования.
scale3d(x,y,z) Определяет трансформацию масштабирования 3D.
scaleX(x) Преобразование масштабирования определяется установкой значения оси X.
scaleY(y) Преобразование масштабирования определяется установкой значения оси Y.
scaleZ(z) Определите преобразование 3D-масштабирования, установив значение оси Z.

3. rotate

стоимость описывать
rotate(angle) Задайте 2D поворот, указав угол в параметрах.
rotate3d(x,y,z,angle) Определение трехмерного вращения.
rotateX(angle) Определяет трехмерное вращение по оси X.
rotateY(angle) Определяет трехмерное вращение по оси Y.
rotateZ(angle) Определяет трехмерное вращение по оси Z.

4. skew

стоимость описывать
skew(x-angle,y-angle) Определяет двумерное преобразование наклона по осям X и Y.
skewX(angle) Определяет двумерное преобразование наклона по оси X.
skewY(angle) Определяет двумерное преобразование наклона по оси Y.

5. transform-origin

Контрольной точкой по умолчанию для вышеуказанных изменений является центральная точка элемента, но ее можно изменить,transform-originУстанавливает опорную точку для элемента.

transform-origin: X || Y || Z

Среди них X, Y, Z соответствуют трехмерным координатам, а значения X, Y и Z могут быть em, px. Кроме того, X, Y могут быть значениями в процентах, где X также может быть значениями параметров символа слева, по центру, справа. В дополнение к процентному значению, Y и X также могут устанавливать верхнее, центральное и нижнее значение символа.

Конкретные примеры уже не пишутся, кейсов много, а реализация относительно проста.

4. Резюме

Выше приведены три свойства анимации в CSS 3. Содержание относительно простое, но очень практичное. Нужен только CSS, вы можете добиться более простых эффектов анимации, устраняя необходимость в сложном коде js.

Категории