046_CSS3动画

1. 通过CSS3, 我们能够创建动画, 这可以在许多网页中取代动画图片、Flash动画以及JavaScript。

2. CSS3动画属性

3. @keyframes规则

3.1. 通过@keyframes规则, 您能够创建动画。

3.2. 创建动画的原理是, 将一套CSS样式逐渐变化为另一套样式。

3.3. 在动画过程中, 您能够多次改变这套CSS样式。

3.4. 以百分比来规定改变发生的时间, 或者通过关键词"from"和"to", 等价于0%和100%。

3.5. 0%是动画的开始时间, 100%动画的结束时间。

3.6. 为了获得最佳的浏览器支持, 您应该始终定义0%和100%选择器。

3.7. 请使用动画属性来控制动画的外观, 同时将动画与选择器绑定。

3.8. 您必须定义动画的名称和时长。如果忽略时长, 则动画不会允许, 因为默认值是0。

3.9. 必须值

3.10. 实例

@keyframes mymove
{0% {top: 0px;}25% {top: 200px;}50% {top: 100px;}75% {top: 200px;}100% {top: 0px;}
}

4. animation属性

4.1. animation 属性是一个简写属性, 用于设置八个动画属性:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode

4.2. 请始终规定animation-duration属性, 否则时长为0, 就不会播放动画了。

4.3. 默认值

4.4. 可能值

5. animation-name属性

5.1. animation-name属性为@keyframes动画规定名称。

5.2. 默认值

5.3. 可能值

6. animation-duration属性

6.1. animation-duration属性定义动画完成一个周期所需要的时间, 以秒或毫秒计。

6.2. 默认值

6.3. 可能值

7. animation-timing-function属性

7.1. animation-timing-function规定动画的速度曲线。

7.2. 速度曲线定义动画从一套CSS样式变为另一套所用的时间。

7.3. 速度曲线用于使变化更为平滑。

7.4. 默认值

7.5. animation-timing-function使用名为三次贝塞尔(Cubic Bezier)函数的数学函数, 来生成速度曲线。您能够在该函数中使用自己的值, 也可以预定义的值:

7.6. 实例

#div1 {animation-timing-function: linear;
}
#div2 {animation-timing-function: ease;
}
#div3 {animation-timing-function: ease-in;
}
#div4 {animation-timing-function: ease-out;
}
#div5 {animation-timing-function: ease-in-out;
}

7.7. cubic-bezier实例

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);
}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);
}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);
}

8. animation-delay属性

8.1. animation-delay属性定义动画何时开始。

8.2. animation-delay值以秒或毫秒计。

8.3. 允许负值, -2s使动画马上开始, 但跳过2秒进入动画。

8.4. 默认值

8.5. 可能值

9. animation-iteration-count属性

9.1. animation-iteration-count属性定义动画的播放次数。

9.2. 默认值

9.3. 可能值

10. animation-direction属性

10.1. animation-direction属性定义是否应该轮流反向播放动画。

10.2. 如果animation-direction值是"alternate", 则动画会在奇数次数(1、3、5 等等)正常播放, 而在偶数次数(2、4、6 等等)向后播放。

10.3. 如果把动画设置为只播放一次, 则该属性没有效果。

10.4. 默认值

10.5. 可能值

11. animation-play-state属性

11.1. animation-play-state属性规定动画正在运行还是暂停。

11.2. 默认值

11.3. 可能值

12. animation-fill-mode属性

12.1. animation-fill-mode属性规定动画在播放之前或之后, 其动画效果是否可见。

12.2. 其属性值是由逗号分隔的一个或多个填充模式关键词。

12.3. 默认值

12.4. 可能值

13. 例子

13.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>CSS3动画</title><style type="text/css">div {margin: 20px;}#div1 {width: 100px;height: 100px;background: pink;float: left;animation-name: myfirst;animation-duration: 10s;animation-timing-function: linear;animation-delay: 1s;animation-iteration-count: 3;animation-direction: normal;animation-play-state: running;animation-fill-mode: backwards;}#div2 {width: 100px;height: 100px;background: pink;float: left;animation: myfirst 10s ease 1s 3 alternate running forwards;}#div3 {width: 100px;height: 100px;background: pink;float: left;animation: myfirst 10s ease-in 1s 2 alternate running both;}@keyframes myfirst {0% {background: red;}25% {background: yellow;}50% {background: blue;}75% {background: green;}100% {background: #00FF00;}}</style></head><body><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div></body>
</html>

13.2. 效果图

046_CSS3动画相关推荐

Android Animation (安卓动画）概念简介
Android Animation Android 四种动画分别为逐帧动画和补间动画.属性动画.过渡动画: Frame Animation (逐帧动画) 实现方式:xml 和 Java代码图片跳转的 ...
Android动画之帧动画和补间动画
Android系统提供三种动画:帧动画.补间动画和属性动画.这里先分析总结帧动画和补间动画. FrameAnimation 帧动画,通俗来说就是按照图片动作顺序依次播放来形成动画,创建帧动画可以用 x ...
Android 动画 ViewPropertyAnimator 的使用
ViewPropertyAnimator 说明: ViewPropertyAnimator 可为View对象上的选择属性启用自动和优化的动画, ViewPropertyAnimator 不是由调用方构 ...
Android ViewAnimationUtils (动画) 的使用
先看下ViewAnimationUtils 实现的几个常见的效果图如下: ViewAnimationUtils 的作用: 设置剪切圆动画的动画制作器一般的使用如下: Animator revea ...
Android AnimationUtils (动画)的使用
AnimationUtils 其实就是补间动画(Tween Animation) 在xml 中的写了动画java 中调用这边打算就写一个demo 简答的记录下它的使用详细的请看点击查看,这篇博客 ...
Android ProgressBar 加载中界面实现(loading 动画) 实现菊花的效果
实现的效果图如下: 使用方法ProgressBar ,如果感觉这个动画不是自己想要的,需要根据ui的图片来实现只需要将xml中的animated-rotate 修改为animation-list 贴 ...
Android 属性动画(Property Animation) ObjectAnimator的介绍
先说下属性动画与视图动画的区别: 视图动画系统仅提供为 View 对象添加动画效果的功能,因此,如果您想为非对象添加动画效果,则必须实现自己的代码才能做到.视图动画系统也存在一些限制,因为它仅公开 ...
Android 属性动画(Property Animation) ValueAnimator 的介绍
先说下属性动画与视图动画的区别: 视图动画系统仅提供为 View 对象添加动画效果的功能,因此,如果您想为非对象添加动画效果,则必须实现自己的代码才能做到.视图动画系统也存在一些限制,因为它仅公开 ...
Android 补间动画(Tween Animation)
Tween Animation(补间动画): Tween动画,通过对View的内容进行一系列的图形变换 (包括平移.缩放.旋转.改变透明度)来实现动画效果.动画效果的定义可以采用XML来做也可以采用编 ...

046_CSS3动画

046_CSS3动画相关推荐

最新文章

热门文章