Эксперименты с свойствами анимации
Давайте настроим нашу анимацию, экспериментируя с различными свойствами анимации. Это поможет вам понять, как эти свойства влияют на поведение анимации.
- Откройте файл
style.css
и измените селектор .zoom-in-out-box
, чтобы попробовать разные свойства анимации:
.zoom-in-out-box {
margin: 24px;
width: 50px;
height: 50px;
background: #f50057;
animation: zoom-in-zoom-out 2s ease-in-out infinite;
/* Add a slight rotation during the animation */
border-radius: 10px;
}
-
Поймем, что мы изменили:
- Мы увеличили продолжительность анимации до
2s
(2 секунды)
- Мы изменили функцию времени на
ease-in-out
, которая делает как начало, так и конец анимации плавными
- Мы добавили
border-radius
в 10 пикселей, чтобы сделать углы нашего блока закругленными
-
Также изменим наши ключевые кадры (keyframes), чтобы добавить эффект вращения:
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1) rotate(0deg);
}
50% {
transform: scale(1.5, 1.5) rotate(45deg);
background-color: #2196f3;
}
100% {
transform: scale(1, 1) rotate(0deg);
}
}
-
В этом обновленном определении ключевых кадров:
- Мы добавили функцию
rotate()
к свойству transform
- На отметке 50% элемент теперь вращается на 45 градусов при увеличении
- Мы также изменили цвет фона на синий на отметке 50%
-
Сохраните файл style.css
после внесения этих изменений.
-
Обновите вкладку Web 8080, чтобы увидеть улучшенную анимацию.
Теперь ваша анимация должна быть медленнее (2 секунды на цикл), иметь закругленные углы, вращаться при увеличении и изменять цвет посередине анимации. Это демонстрирует, как анимации CSS могут комбинировать несколько изменений свойств для создания богатых визуальных эффектов.
Не стесняйтесь проводить дальнейшие эксперименты с разными свойствами и значениями, чтобы увидеть, как они влияют на вашу анимацию.