CSS3动画与过渡

王朝学院·作者佚名  2016-05-23
窄屏简体版  字體: |||超大  

CSS3动画与过渡transform:在使用2D或3D转换前需用transform-style申明转换的类型,PReserve-3d或者preserve-2d

属性

translate():

通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数移动。

rotate():

通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转.

在3D下,有rotateX():向屏幕例外翻转;rotateY():在屏幕左右翻转,rotateZ():与2d下rotate()相同,在屏幕上顺时针或逆时针旋转。

scale():

通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数

skew():

通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数

transition:在不使用 Flash 动画或 javaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果

必须规定两项内容:

规定您希望把效果添加到哪个 CSS 属性上规定效果的时长例:transition:width 2s;

样式:ease平缓变化

linear均匀变化

ease-in缓慢开始

ease-out缓慢结束

ease-in-out缓慢开始,缓慢结束

动画:首先要先用@keyframe动画名的格式定义一个动画,再用animation调用动画

@keyframe myfirst{

from{}//开始效果

to{}//结束效果

}

或@keyframemyfirst{

0%{}//也可以用百分比表示动画的进程

30%{}

70%{}

100%{}

}

animation:

animation-name: myfirst; //动画名animation-duration: 5s;//动画时长animation-timing-function: linear;//动画变化效果,同transitionanimation-delay: 2s;//动画延迟播放时间animation-iteration-count: infinite;//infinite定义为无线循环animation-direction: alternate;//规定动画是否在下一周期逆向地播放。默认是 "normal"。

animation-play-state:running//规定动画是否正在运行或暂停。默认是 "running"。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航