Как написать анимацию на CSS (от базовой анимации до 3d анимации)

CSS

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

Сегодня буду следовать модели этого лектора, особо нечего сказать, эффект будет ~~

1. Простая градиентная анимация


2. Чуть более сложная анимация ключевых кадров


3. Комбинируйте преобразование для достижения эффекта 3D-анимации.


Выглядит нормально, и этому очень легко научиться.

Тогда давайте поиграем шаг за шагом~~

transition

transition даcss3Одна из изюминок , он обычно имеет следующие атрибуты:

  • transition-property--Укажите имя свойства CSS, которое задает эффект перехода
  • transition-duration--Укажите, сколько секунд или миллисекунд требуется для завершения эффекта перехода
  • transition-timing-function- кривая скорости указана эффект скорости
  • transition-delay--определяет, когда начинается эффект перехода
Примерный код выглядит следующим образом, опуская часть кода:

button {
  ...
  background-color: red;
  transition-property: opacity, background-color, border-radius; /* 列表以逗号分隔 */
  transition-duration: 0.5s;
  transition-timing-function: ease; /* 默认速度效果 */
  transition-delay: 1s;
  ...
}
button:hover {
  ...
  opacity: 0.3;  background-color: #fff000;
  border-radius: 100px;
  ...
}
Конечно, это немного громоздко писать, конечно можно упростить:

button { 
 background-color: red; 
 transition: opacity  0.5s 1s ease, background-color  0.5s 1s ease, border-radius  0.5s 1s ease; 
}

Каждая запятая в приведенном выше коде разделяет 4 параметра: свойства CSS, время перехода, время начала паузы и кривую скорости. Кажется, это немного хлопотно:

button {
  ...  
  background-color: red;  
  transition: all 0.5s 1s ease;
  ...
}

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

transition: opacity  0.5s 1s ease, background-color  1.5s 2s linear, border-radius  0.5s cubic-bezier(0.215, 0.610, 0.355, 1);


Таким образом, мы можем использоватьallпоставить все тот же эффектcssАтрибуты заменены~


Хи-хи, разве это не выглядит хорошо, а код лаконичен?

дляtransition-timing-functionЗдесь я рекомендую очень полезный веб-сайт для всех, вы можете свободно отлаживать кривую скорости Безье, которую хотите, нажмите GO! Проверьте эффект. Скопируйте верхний код, и вы можете использовать свой код~

Кликните сюда: Я тоже посмотрю на эффект!


animation + @keyframes

animation Это продвинутый этап анимации CSS3, с которым он сотрудничает.@keyframes, вы можете добиться более сложного поведения анимации.
  • animation-name — указывает имя ключевого кадра, который необходимо привязать к селектору.
  • анимация-длительность — указывает время, необходимое для завершения анимации, в секундах или миллисекундах.
  • анимация-время-функция - определяет кривую скорости анимации
  • анимация-задержка — указывает задержку перед запуском анимации
  • анимация-итерация-счетчик — указывает, сколько раз должна воспроизводиться анимация
  • анимация-направление - указывает, должна ли анимация воспроизводиться в обратном порядке по очереди
  • animation-play-state -- свойство paused|running указывает, запущена анимация или приостановлена
Написание одного за другим все еще будет немного сложным, так что вот окончательный эффект кода~

button{
  animation: ani 5s 2s infinite ease;
}

@keyframes ani {
  20%{    opacity: 0.3;  }
  40%{    border-radius: 100px;  }
  60%{    background-color: #fff000;  }
}

здесьkeyframesкак если бы вы объявили функцию анимации,aniимя вашей функции.animationпросто иди к этомуbuttonдля выполнения функции. 5 параметров представляют имя функции анимации, время перехода, время начала паузы и количество анимаций (infiniteпредставляет бесконечность), кривая скорости.



анимация+преобразование 3d анимация

Наконец-то настал самый волнующий момент. Простая анимация, приведенная выше, может быть знакома большинству людей, но 3D-анимация все еще может использоваться некоторыми людьми. Она включает в себя некоторые 3D-идеи и может быть более абстрактной для детской обуви. Но сегодня мы немного научимся. На самом деле все просто~

Нечего сказать, если мы хотим реализовать куб, конечно, нам нужно 6 плоскостей? (эмммм это не ерунда, детсад будет);

Босс, дайте мне шесть разноцветных дивов!

<p>客观，您要的div：</p>
<div class="aniBox">  
  <div class="ani1"></div> 
  <div class="ani2"></div>
  <div class="ani3"></div>
  <div class="ani4"></div>
  <div class="ani5"></div>
  <div class="ani6"></div>
</div>

.aniBox {
  width: 220px;
  height: 220px;
}
.aniBox>div {
  width: 100%;
  height: 100%;
}
.ani1 {
  background: #4879dc;
}
.ani2 {
  background: #3bd168;
}
.ani3 {
  background: #e31653;
}
.ani4 {
  background: #1ed3eb;
}
.ani5 {
  background: #e9c80f;
}
.ani6 {
  background: #821fd3;
}

Хорошо, приглашенный офицер, это ваш div, я помещу его в большой div, чтобы вы установили~~

Вот рендеринг. . . .


? ? ?

Эмммм босс, они все вылезли из мешка, заверните их для меня~~

.aniBox {
  position: relative;
  width: 220px;
  height: 220px;
}
.aniBox>div {
  position: absolute;
  width: 100%;
  height: 100%;
}


Итак, соедините все 6 div вместе, начните делать 6 граней, используйте transform для поворота и смещения.


Красный посередине можно представить плоскость документооборота. Теперь нужно переместить первую грань вперед на половину расстояния:

.ani1 {
  background: #4879dc;
  transform: translateZ(110px) /*前*/
}


Эй, кажется, ничего не изменилось, я ясно#4879dc Цвет переместился на передний план? После некоторых исследований я наконец нашел атрибут transform-style: save-3d, который указывает, как отображать вложенные элементы в трехмерном пространстве. Он должен быть установлен на родительском элементе, и у родительского элемента есть трансформация (то есть есть деформация), и у дочернего элемента тоже должна быть трансформация (трансформация), чтобы увидеть эффект.

  • transform-style: flat -- дочерние элементы не сохранят свое трехмерное положение.
  • transform-style: save-3d — дочерние элементы сохранят свое трехмерное положение.

┗|｀O′|┛ 嗷~~ Это поймёт:

.aniBox {
  position: relative;
  transform-style: preserve-3d;
  width: 220px;
  height: 220px;
}


Хахаха, это работает.

OK! Начните с остальных пяти сторон~~~

.ani2 {
  background: #3bd168;
  transform: translateZ(-110px)  /*后*/
}
.ani3 {
  background: #e31653;
  transform: rotateY(90deg) translateZ(110px)  /*右*/
}
.ani4 {
  background: #1ed3eb;
  transform: rotateY(-90deg) translateZ(110px)  /*左*/
}
.ani5 {
  background: #e9c80f;
  transform: rotateX(90deg) translateZ(110px)  /*上*/
}
.ani6 {
  background: #821fd3;
  transform: rotateX(-90deg) translateZ(110px)  /*下*/
}

Эй, кажется, он заблокирован и не видит никакого эффекта~~~ Забудьте об этом, давайте сыграем прямо на консоли:

Ха-ха, получилось, вроде эффектно, ладно, давайте добавим ему анимацию~~

.aniBox {
  position: relative;
  margin: 30px auto;
  transform-style: preserve-3d;
  width: 220px;
  height: 220px;
  animation: box-3d 5s infinite;
}
@keyframes box-3d {
  100% {
    transform: rotateX(360deg) rotateZ(-720deg)
     /* 让他的结束角度 都为360的整数倍，这样他就可以看起来无缝衔接 */  
  }
}


Эй, эта анимация кажется быстрой, а потом медленной? Добавьте линейку, чтобы она выглядела однородной:

.aniBox {
  animation: box-3d 5s infinite linear;
}


Я думал, что все кончено, но всегда чувствовал, что что-то не так. Я искал в Интернете и нашел, о ~ ~ есть еще почти большой, очень маленький эффект!

  • перспектива --property определяет расстояние в пикселях от 3D-элемента до вида. Это свойство позволяет изменить представление 3D-элемента 3D-элемента. Когда свойство перспективы определено для элемента, его дочерние элементы получают эффект перспективы, а не сам элемент.

Emmmm онлайн заявление трудно понять. Я объясню это вам своими собственными мыслями.

Я думаю о перспективе как о расстоянии от центра дома до человека перед ним. (Эм~~ Я все еще не понимаю, забудьте, поместите это на картинку выше!)


это куб, который вы можете принять за размер вашей комнаты, иperspectiveВы можете принять его как расстояние между этим красным лицом и лицом ABCD.

Так как это комната, вам нужно упаковать этот куб ~:

<div class="perBox">
      <div class="aniBox">
        <div class="ani1"></div>
        <div class="ani2"></div>
        <div class="ani3"></div>
        <div class="ani4"></div>
        <div class="ani5"></div>
        <div class="ani6"></div>
      </div>
</div>

.perBox {  perspective: 800px;}


Это намного более трехмерно? ? ? ?

Что не работает? ? ?

Это легко сделать, подумай, добавь чашку и поставь ее посреди комнаты, а ты стоишь у оконного стекла дома.Чем меньше дом, тем конкретнее ты выглядишь? Хорошо, давайте сделаем дом меньше!

.perBox {  perspective: 400px;}


О-о-о-о~~ Он достаточно трехмерный! ?

Что вы хотите видеть внутри этой коробки? Ширина этого div220px, половина110px;

Тогда, пока мы меньше, чем110px, ты можешь заглянуть внутрь? попробуй~~

.perBox {  perspective: 100px;}

,

Хахаха, у тебя кружится голова? Нет ощущения горения видеокарты! ! ! ?

Сожги свой GPU!

Это все для нашей анимации, давайте посмотримperspectiveСовместимость этой вещи:


О нет~ страшно.

Прикрепил несколько забавных демонстраций:

GitHub.com/evelope/CSS…

GitHub.com/evelope/my-…

Категории