CSS3
February 15, 2021
⑩ Задержка анимации: свойство animation-delay
Продолжим изучение темы CSS3 - анимация. Если пропустили прошлые статьи, то вот ссылки на них:
- ① Введение в CSS3-анимацию
- ② Ключевые кадры
- ③ Временная функция для ключевых кадров
- ④ Название анимации: свойство animation-name
- ⑤ Продолжительность анимации: свойство animation-duration
- ⑥ Временная функция: свойство animation-timing-function
- ⑦ Повтор анимации: свойство animation-iteration-count
- ⑧ Направление анимации: свойство animation-direction
- ⑨ Проигрывание анимации: свойство animation-play-state
Свойство animation-delay
определяет, когда анимация начнется. Задается в секундах s
или миллисекундах ms
.
Свойство не наследуется.
animation-delay
Значения:
- время - Время определяет длительность задержки между началом анимации (когда анимация применяется к элементу через свойства) и когда она начинает выполняться. Отрицательные значения разрешены, такая задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Чтобы анимация началась с середины, нужно задать отрицательную задержку, равную половине времени, установленном в
animation-duration
. Значение по умолчанию0s
.
Синтаксис
CSS
animation-delay: 5s; animation-delay: 3s, 10ms;
HTML
<div> <span class="one"></span> <span class="two"></span> <span class="three"></span> <span class="four"></span> </div>
CSS
body { margin: 0; background: #F4EDE5; } div { width: 100px; height: 100px; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; } span { display: block; position: absolute; width: 40%; height: 40%; border-radius: 50%; box-shadow: 2px 2px 3px rgba(0,0,0,.4); -webkit-animation: run 2s infinite ease-in-out; animation: run 2s infinite ease-in-out; } .one { background: #F3B222; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .two { background: #F0653E; -webkit-animation-delay: 1s; animation-delay: 1s; } .three { background: #B9C0C0; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .four { background: #8F7473; } @-webkit-keyframes run { 0% { transform: translate(0%); border-radius: 50%; } 25% { transform: translate(150%) scale(0.5); border-radius: 0%; } 50% { transform: translate(150%, 150%); border-radius: 50%; } 75% { transform: translate(0%, 150%) scale(0.5); border-radius: 0%; } } @keyframes run { 0% { transform: translate(0%); border-radius: 50%; } 25% { transform: translate(150%) scale(0.5); border-radius: 0%; } 50% { transform: translate(150%, 150%); border-radius: 50%; } 75% { transform: translate(0%, 150%) scale(0.5); border-radius: 0%; } }
Продолжение в следующей статье!