css3实现动画效果常用方法
早期在web中要实现动画效果,都是依赖于JavaScript或flash来完成,但在css3中新增加了一个新的模块transition,它可以通过一些简单的css事件来触发元素的外观变化,让效果显得更加细腻。简单来说,就是通过鼠标的单击、获得焦点、被点击、或对元素任何改变中触发,并平滑地以动画效果改变css属性值
在css中创建简单的过渡效果可以从以下几个步骤来实现:
(1)在默认样式中声明元素的初始状态样式
(2)声明过渡元素最终状态样式,比如悬浮状态
(3)在默认样式中通过添加过渡函数,添加一些不同的样式
1、 css变形属性
transform属性的基本语法如下:
translate(): 移动元素,可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数 translateX()和translateY();
scale():缩小或方法元素,可以使用元素尺寸发生变化,在此基础上用两个扩展函数 scaleX()和scaleY();
rotate(): 旋转元素,其参数值为旋转的角度值(360deg)
skwe();让元素倾斜。在此基础上有两个扩展函数skewX()和skewY()
matrix():定义矩阵变形,基于X轴和Y轴
2、过渡属性transition
过渡属性是一个复合属性,主要包括以下几个属性
transition-property:指定过渡或动态模拟的css属性(CSS属性名称)
transition-duration:指定完成过渡所需的时间(持续时间)
transition-timing-function:指定过渡函数(缓动函数)
transition-delay:指定开始出现的延迟时间(改变元素属性值后多长时间开始执行)
transition的优点在于简单易用,但是它有几个很大的局限。
(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
3、animation动画
animation-name属性主要用来调用@keyframes定义好的动画
animation-duration属性主要用来设置CSS3动画播放时间
animatino-timing-function属性主要用来设置动画播放方式
animation-delay属性用来定义动画开始播放的时间,用来触发动画播放的时间点
animation-iteration-count属性主要用来定义动画的播放次数
animation-direction属性主要用来设置动画播放方向
animtion-play-state属性是用来控制元素动画的播放状态
animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果
因篇幅问题不能全部显示,请点此查看更多更全内容