CSS3动画
CSS3 提供了多种方式来创建动画效果。
以下是 CSS3 支持的常见动画属性:
transition(过渡):通过在元素状态之间平滑过渡来实现动画效果。可以实现平滑的颜色渐变、大小调整等效果。
transform(变换):使用 2D 或 3D 转换函数改变元素的形状、大小、位置和角度。可以实现旋转、缩放、倾斜等效果。
animation(动画):通过定义关键帧来创建复杂的动画效果。可以实现更复杂、多步骤的动画,包括淡入淡出、滑动、闪烁等效果。
配合keyframes使用。keyframes(关键帧):定义动画中的关键状态和时间点,用于配合 animation 属性创建复杂的动画效果。
transition
transition(过渡):通过在元素状态之间平滑过渡来实现动画效果。
示例:
1 | .box { |
transform
transform(变换):使用 2D 或 3D 转换函数改变元素的形状、大小、位置和角度。
示例:
1 | .box { |
animation
animation(动画):通过定义关键帧来创建复杂的动画效果。
示例:
1 | @keyframes move_anim { |
停留到最后一帧
要让动画执行完毕后停止在最后一帧,可以使用 animation-fill-mode
属性。将 animation-fill-mode
设置为 forwards
可以实现这个效果。
具体实现步骤如下:
- 在
@keyframes
规则中定义动画的关键帧。 - 设置
animation-fill-mode: forwards;
,确保动画执行完毕后停留在最后一帧。
示例代码如下:1
2
3
4
5
6
7
8
9
10
11div {
animation-name: example;
animation-duration: 4s;
animation-fill-mode: forwards;
}
@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: blue;}
}
元素会根据 example
动画播放,在最后一帧(100%)时停止,并保持最终状态。
这样就实现了动画执行后停止在最后一帧的效果。
animation-fill-mode
animation-fill-mode
属性指定在动画播放之前和之后,元素应如何应用样式。
以下是 animation-fill-mode
可能的取值:
none
:默认值,动画不会影响动画播放之前或之后元素的样式。元素会按照动画的属性值逐渐过渡。forwards
:在动画结束后,元素会应用动画的最后一个关键帧属性值,保持在最后一帧的状态。backwards
:在动画播放之前(即在动画开始之前,包括延迟时间)元素将应用动画的第一个关键帧属性值,等待实际动画播放。both
:同时应用forwards
和backwards
的效果,即在动画播放之前应用第一个关键帧属性值,在动画结束后保持最后一帧的状态。
注意,animation-fill-mode
只会影响动画播放前和播放后的状态。
动画播放期间元素会根据关键帧逐渐过渡。
示例
上移
1 | .tabbar_item:hover { |
放大
1 | .content_outer:hover { |
旋转1
1 | <img :class="{'rotate360':showAnimate}" @click="showAnimate=true" @animationend="showAnimate=false"></i> |
对应的css
1 | @keyframes rotate360 { |
旋转2
1 | /* 旋转动画 指定class为trun即可使用*/ |
淡入淡出
1 | .turn4 { |
按钮悬浮渐变动画
1 | .login_btn { |
对应的HTML
1 | <div class="login_btn"> |
底线滑动效果
1 | .input_outer { |
对应的HTML
1 | <div class="input_outer"> |