css3动画
要创建 CSS3 动画,你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
@keyframes
关键帧属性
@keyframes 关键帧的名称{
0%/from{
}
50%{
}
100%/to{
}
}
- 当用
@keyframes
属性创建一个动画时,需要起一个关键帧的名称。其他元素可以通过animation
属性调用这个动画。
animation
属性
animation
是一个复合属性- 常用写法为
animation:关键帧名称 动画运行时间 运行方式
- animation-name 关键帧名称
- animation-duration 动画持续时间
- animation-timing-function 动画运用的类型(匀速linear、加速等)
- animation-delay 动画的延迟
- animation-iteration-count 动画运行的次数(默认一次,infinite无限循环)
- animation-direction 动画运行的方向
- reverse反向
- alternate先正向后反相交替运行
- alternate-revers先反后正交替
- animation-play-state 动画运行状态
- pause暂停
- running运行
- animation-timing-function 动画的类型
- linear/ease/ease-in
- step-start 没有动画中间的过渡效果。每次直接跳到下一帧开始的地方
- 常用写法为
现在你已经会调用动画了,当时怎么设置动画呢?动画又有哪些呢?
下面为你介绍位移、旋转、缩放。首先先创建一个3D舞台。
创建3d舞台
transform-style:preserve-3d
作用是形成一个3d空间,这个属性一般添加在父元素即可。默认值为flat。
- 3d功能函数
- 位移transform:translate(x,y,z);
- 旋转transform:rotate(x,y,z);
- 缩放transform:scale3d(x,y,z);
- 背面不可见属性backface-visibility:hidden;
注意transition
和animation
的区别
transition需要触发。animation不需要触发,调用关键帧即可。