首页 > > 网页制作 > css >

笔记 — 动画效果（Css3）

2018-06-24 02:14:48来源：未知阅读 ()

/**
 * animation-name: 调用 @keyframes 所定义的动画
 * animation-duration: 动画周期所花费的时间长度
 * animation-timing-function: 规定动画的速度曲线
 * animation-delay: 延时执行动画的时间
 * animation-iteration-count: 动画执行的次数
 * animation-dircetion: 规定动画下一周期是否逆向播放
 * animation-play-state: 规定动画为运行或暂停状态
 * animation-fill-mode: 规定动画对象时间之外的状态
 */

element {
　　animation-name: aName;
　　animation-duration: 2s;
　　animation-timing-function: ease;
　　animation-delay: 2s;
　　animation-iteration-count: 2;
　　animation-direction: normal;　　
　　animation-play-state: running;
　　animation-fill-mode: none;
}

@keyframes aName {
　　from: {
　　　　/* 初始状态 */
　　}　
　　to: {
　　　　/* 结束状态 */
　　}
}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有