cssanimation
时间: 2023-10-21 19:29:01 浏览: 46
CSS动画(CSS animation)是CSS3中的一个特性,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比过渡,动画可以实现更多变化、更多控制、连续自动播放等效果。[2]
在CSS中,制作动画通常分为两步:定义动画关键帧(@keyframes)和调用动画。@keyframes是用来定义动画序列的,可以规定元素从一种样式逐渐变化为另一种样式的动画效果。通过在@keyframes中设置不同的百分比或关键词(如from和to)来指定变化发生的时间和样式。
以下是一些基本的CSS动画用法示例:
1. 使用animation属性简写方式来定义动画效果:
```
div {
animation: move 2s linear 0s infinite alternate forwards;
}
```
2. 使用@keyframes来定义动画关键帧:
```
@keyframes move {
from {
transform: translateX(0px);
}
to {
transform: translateX(1400px);
}
}
```
3. 使用百分比来控制动画变化过程:
```
@keyframes move {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(1000px);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0px, 500px);
}
100% {
transform: translate(0px, 0px);
}
}
```
以上是一些CSS动画的基本用法示例,您可以根据需要自由组合和调整动画效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>