在这个夏天与Html5不期而遇（八）

时间：2016-07-14 01:16:52 阅读：285 评论：0 收藏：0 [点我收藏+]

标签：

一、关键帧

1、表示符：@keyframs （0%~100%）

@keyframsNAME {

0% {

CSS样式 {color：red；}

}

. .

}

100% {

CSS样式 {color：red；}

}

帧设计的越细，动画越逼真！与过渡相比不需要触发

2、实现动画需要的属性；

amimation-name：给动画起一个名称

animation-duration：设置动画持续周期

animation-timing-function：设置速率

函数：ease 逐渐变慢

linear 匀速

ease-in 加速

ease-out 减速

ease-in-out 先加速再减速

cubic-bizer：自定义时间曲线（x1，y1，x2，y2）四个值两个点 [0~1];

animation-delay：延迟

animation-iteration-count：动画的执行次数，默认一次 infinite无限次

animation-play-state：用来控制动画播放状态 running；paused；

animation-direction：播放的方向

normal正常播放 alternate表示轮流播放，即动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放.

animation 属性是一个简写属性，定义动画的各方面:

–animation: name duration timing-function delay iteration-count direction;

标签：

原文地址：http://www.cnblogs.com/Jabin/p/5668033.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行