前端：CSS3 过渡动画

目录

 

过渡属性：transition

定义过渡属性名称：transition-property：

定义过渡时间：transition-duration

设置延迟时间：transition-delay

设置过渡类型：transition-timing-function

设置触发方式：CSS伪类或javascript事件

CSS伪类触发

设置关键帧：@keyframes

设置动画属性：animation

示例：球向右移动

球在框中移动

3D几何体：鼠标经过时沿y轴旋转

---

过渡属性：transition

定义过渡属性名称：transition-property：

transition-property:none(没有元素)

transition-property:all(所有元素，默认值)

transition-property:IDENT(指定CSS属性列表，大小位置变形渐变等)

示例：原来红色过渡到蓝色

定义过渡时间：transition-duration

初始值为0，直接看到结果

设置延迟时间：transition-delay

设置过渡类型：transition-timing-function

transition-timing-function:ease(平滑过渡)

transition-timing-function:linear(线性过渡)

transition-timing-function:ease-in(慢到快过渡)

transition-timing-function:ease-in(快到慢过渡)

transition-timing-function:cubic-bezier(特殊的立方贝塞尔曲线效果)

设置触发方式：CSS伪类或javascript事件

CSS伪类触发

设置关键帧：@keyframes

@keyframes animationname{

     keyframes-selectior{

           css-styles;

     }

}

设置动画属性：animation

动画名称：animation-name:none(初始值，没有动画，用于选择关键帧)

动画时间：animation-duration:0(初始值，没有动画)

动画类型：animation-timing-function:ease(初始值)

延迟时间：animation-delay:0(初始值)

播放次数：animation-iteration-count:1（默认值，infinite无限次）

播放方向：animation-direction:normal(默认值，循环向前播放，alternate第偶次数向前播放)

播放状态：animation-play-state:running(默认值，播放中，pushed已暂停)

播放外状态：

animation-fill-mode:none(不设置)

animation-fill-mode:forwards(结束时状态)

animation-fill-mode:backwards(开始时状态)

animation-fill-mode:both(播放前后状态)

示例：球向右移动

球在框中移动

3D几何体：鼠标经过时沿y轴旋转

6面配置

动画效果设置

布局

效果