脚本宝典收集整理的这篇文章主要介绍了css3动画效果小结(推荐),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
css3的动画功能有以下三种:
1、transITion(过度属性)
2、animation(动画属性)
3、transform(2D/3D转换属性)
下面逐一进行介绍我的理解:
1、transition:<过渡属性名称> <过渡时间> <过渡模式>
等同于:
-webkit-transition-PRoPErty:color;
-webkit-transition-duration:1s;
多个属性的过渡效果可以这样写:
方法1:-webkit-transition:<属性1> <时间1> ,<属性2> <时间2> ,。。。
方法2:
-webkit-transition:<属性1> <时间1>;
-webkit-transition:<属性2> <时间2>;
transition-timing-function属性值有5个:
ease:缓慢开始,缓慢结束
liner:匀速
ease-in:缓慢开始
ease-out:缓慢结束
ease-in-out:缓慢开始,缓慢结束(和ease稍有区别)
实例:
transition过渡效果
2、动画属性animation
animation: name duration timing-function delay iteration-count direction;
值 |
描述 |
animation-name |
规定需要绑定到选择器的 keyframe 名称。。 |
animation-duration |
规定完成动画所花费的时间,以秒或毫秒计。 |
animation-timing-function |
规定动画的速度曲线。 |
animation-delay |
规定在动画开始之前的延迟。 |
animation-iteration-count |
规定动画应该播放的次数。 |
animation-direction |
规定是否应该轮流反向播放动画。 |
注释:internet Explorer 9 以及更早的版本不支持 animation 属性。
@keyframes animationname {keyframes-selector {css-styles;}}
值 |
描述 |
animationname |
必需。定义动画的名称。 |
keyframes-selector |
必需。动画时长的百分比。 合法的值:
|
css-styles |
必需。一个或多个合法的 CSS 样式属性。 |
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
例如:
还可以这么写:
案例:
css3的animation效果
3、设置3D场景(即transform)
-webkit-perspective:800;(单位为像素)--即三维物体距离屏幕的距离。
-webkit-perspective-origin:50% 50%;(这个属性代表了人眼观察的视野。50% 50%为X轴、Y轴相应的位置,即屏幕的正中央。)
使用transform属性调整元素:-webkit-transform-style:-webkit-perserve-3d;(这个属性是告诉浏览器我们是在一个三维空间中对元素进行操作)
(1)、translate(移动距离)
translatex(x px)
translateY(y px)
translateZ(z px)
(2)、rotate(旋转角度)
rotateX(x deg)
rotateY(y deg)
rotateZ(z deg)
transform:rotate(45deg)
rotateX:向屏幕上边沿向内旋转为正方向。
rotateY:向屏幕竖直向下为正方向。
rotateZ:向屏幕外为正方向。
一个div块,右边沿向屏幕内旋转45deg,即应设置为:Transform:rotateY(45deg)。
实例:
transform3D转换效果
使用transform-origin属性调整旋转中心。默认旋转中心点为div盒子的正中心。
这个旋转中心是可以改变的:
X轴:left、center、right.
Y轴:top、center、bottom.
Z轴:length px(一个长度值)。
以上这篇css3动画效果小结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本宝典。
原文地址:http://www.cnblogs.COM/gaotenglong/Archive/2016/07/24/5700997.html
以上是脚本宝典为你收集整理的css3动画效果小结(推荐)全部内容,希望文章能够帮你解决css3动画效果小结(推荐)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。