css3.0动画效果的实现:过渡和动画
过渡:transition
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
@keyframes
animation-name 动画名称
animation-duration 动画时间
animation-timing-function 动画时间函数 cubic-bezier(n, n, n, n);
animation-delay 动画延迟时间
animation-iteration-count 动画播放次数,默认 normal | 无限播放 infinite
animation-direction 动画是否逆向播放 默认 normal | 交替播放 alternate
animation-play-state 动画状态 暂停 paused | 运行 running
animation-fill-mode 动画时间外的状态{none 不改变, forwards 保留最后一组属性值,backwards 应用动画前的属性值, both向前向后填充}
简写:animation: name duration timing-function delay iteration-count direction;
过渡:transition
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
简写:transition:background-color 3s ease-in 3s;
@keyframes
animation-name 动画名称
animation-duration 动画时间
animation-timing-function 动画时间函数 cubic-bezier(n, n, n, n);
animation-delay 动画延迟时间
animation-iteration-count 动画播放次数,默认 normal | 无限播放 infinite
animation-direction 动画是否逆向播放 默认 normal | 交替播放 alternate
animation-play-state 动画状态 暂停 paused | 运行 running
animation-fill-mode 动画时间外的状态{none 不改变, forwards 保留最后一组属性值,backwards 应用动画前的属性值, both向前向后填充}
简写:animation: name duration timing-function delay iteration-count direction;