《web 前端》10.3动画属性

教育.信息化教学课程web前端CSS3动画属性03PART10.3CSS3动画2D转换CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。有如下四种转换方式translate()移动函数rotate()旋转函数scale()缩放函数skew()倾斜函数matrix()矩阵CSS3动画CSS3动画旋转函数div{width:200px;height:100px;background-color:yellow;/*Rotatediv*/transform:rotate(30deg);-ms-transform:rotate(30deg);/*IE9*/-webkit-transform:rotate(30deg);/*SafariandChrome*/}CSS3动画translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。div{width:100px;height:75px;background-color:red;border:1pxsolidblack;}div#div2{transform:translate(50px,100px);-ms-transform:translate(50px,100px);/*IE9*/-webkit-transform:translate(50px,100px);/*SafariandChrome*/}CSS3动画rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。div{ width:100px; height:75px; background-color:red; border:1pxsolidblack;}div#div2{ transform:rotate(40deg); -ms-transform:rotate(40deg);/*IE9*/ -webkit-transform:rotate(40deg);/*SafariandChrome*/}CSS3动画scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：div{ width:200px; height:100px; background-color:yellow; /*Rotatediv*/ transform:rotate(30deg); -ms-transform:rotate(30deg);/*IE9*/ -webkit-transform:rotate(30deg);/*SafariandChrome*/}CSS3动画skew()方法包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。skewX();表示只在X轴(水平方向)倾斜。skewY();表示只在Y轴(垂直方向)倾斜。div#div2{ transform:skew(30deg,20deg); -ms-transform:skew(30deg,20deg);/*IE9*/ -webkit-transform:skew(30deg,20deg);/*SafariandChrome*/}CSS3动画matrix()方法和2D变换方法合并成一个。matrix方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。div{ width:100px; height:75px; background-color:red; border:1pxsolidblack;}div#div2{ transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/*IE9*/ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/*SafariandChrome*/}CSS33D转换属性

说明transform向元素应用2D或3D转换。transform-origin允许你改变被转换元素的位置。transform-style规定被嵌套元素如何在3D空间中显示。perspective规定3D元素的透视效果。perspective-origin规定3D元素的底部位置。backface-visibility定义元素在不面对屏幕时是否可见。transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。CSS3过渡属性

说明transition简写属性，用于将四个过渡属性设置为单一属性。transition-delay规定过渡效果的延迟（以秒计）。transition-duration规定过渡效果要持续多少秒或毫秒。transition-property规定过渡效果所针对的CSS属性的名称。transition-timing-function规定过渡效果的速度曲线。CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。用鼠标移过下面的元素：CSS3过渡过渡应用于宽度属性的过渡效果，时长为2秒div{width:100px;height:100px;background:red;transition:width2s,height4s;}div:hover{width:300px;height:300px;}注意：如果未指定的期限，transition将没有任何效果，因为默认值是0。指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：CSS3过渡指定过渡的速度曲线transition-timing-function属性规定过渡效果的速度曲线。transition-timing-function属性可接受以下值：ease-规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）linear-规定从开始到结束具有相同速度的过渡效果ease-in-规定缓慢开始的过渡效果ease-out-规定缓慢结束的过渡效果ease-in-out-规定开始和结束较慢的过渡效果cubic-bezier(n,n,n,n)-允许您在三次贝塞尔函数中定义自己的值CSS3过渡案例div{width:100px;height:100px;background:red;transition:width2s;}#div1{transition-timing-function:linear;}#div2{transition-timing-function:ease;}#div3{transition-timing-function:ease-in;}#div4{transition-timing-function:ease-out;}#div5{transition-timing-function:ease-in-out;}div:hover{width:300px;}CSS3过渡延迟过渡效果transition-delay属性规定过渡效果的延迟（以秒计）。下例在启动之前有1秒的延迟：div{width:100px;height:100px;background:red;transition:width3s;transition-delay:1s;}div:hover{width:300px;}CSS3过渡过渡+转换div{width:100px;height:100px;background:red;transition:width2s,height2s,transform2s;}div:hover{width:300px;height:300px;transform:rotate(180deg);}CSS3动画属性

说明@keyframes规定动画模式。animation设置所有动画属性的简写属性。animation-delay规定动画开始的延迟。animation-direction定动画是向前播放、向后播放还是交替播放。animation-duration规定动画完成一个周期应花费的时间。animation-fill-mode规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。animation-iteration-count规定动画应播放的次数。animation-name规定@keyframes动画的名称。animation-play-state规定动画是运行还是暂停。animation-timing-function规定动画的速度曲线。CSS3动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。0%是动画的开始，100%是动画的完成。为了得到最佳的浏览器支持，您应该始终定义0%和100%选择器。CSS3动画@keyframes规则@keyframes规则是创建动画。@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。/*动画代码*/@keyframesexample{from{background-color:red;}to{background-color:yellow;}}/*向此元素应用动画效果*/div{width:100px;height:100px;background-color:red;animation-name:example;animation-duration:4s;}CSS3动画当动画为25%及50%时改变背景色，然后当动画100%完成时再次改变：@keyframesmyfirst{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}@-webkit-keyframesmyfirst/*SafariandChrome*/{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}CSS3动画改变背景颜色和位置@keyframesmyfirst{0%{background:red;left:0px;top:0px;}25%{background:yellow;left:200px;top:0px;}50%{background:blue;left:200px;top:200px;}75%{background:green;left:0px;top:200px;}100%{background:red;left:0px;top:0px;}}@-webkit-keyframesmyfirst/*SafariandChrome*/{0%{background:red;left:0px;top:0px;}25%{background:yellow;left:200px;top:0px;}50%{background:blue;left:200px;top:200px;}75%{background:green;left:0px;top:200px;}100%{background:red;left:0px;top:0px;}}CSS3动画改变背景颜色和位置@keyframesmyfirst{0%{background:red;left:0px;top:0px;}25%{background:yellow;left:200px;top:0px;}50%{background:blue;left:200px;top:200px;}75%{background:green;left:0px;top:200px;}100%{background:red;left:0px;top:0px;}}@-webkit-keyframesmyfirst/*SafariandChrome*/{0%{background:red;left:0px;top:0px;}25%{background:yellow;left:200px;top:0px;}50%{background:blue;left:200px;top:200px;}75%{background:green;left:0px;top:200px;}100%{background:red;left:0px;top:0px;}}CSS3动画延迟动画animation-delay属性规定动画开始的延迟时间。负值也是允许的。如果使用负值，则动画将开始播放，如同已播放N秒div{width:100px;height:100px;background-color:red;position:relative;animation-name:example;animation-duration:4s;animation-delay:2s;}@keyframesexample{0%{background-color:red;left:0px;top:0px;}25%{background-color:yellow;left:200px;top:0px;}50%{background-color:blue;left:200px;top:200px;}75%{background-color:green;left:0px;top:200px;}100%{background-color:red;left:0px;top:0px;}}CSS3动画设置动画应运行多少次animation-iteration-count属性指定动画应运行的次数。div{width:100px;height:100px;background-color:red;position:relative;animation-name:example;animation-duration:4s;animation-iteration-count:3;}@keyframesexample{0%{background-color:red;left:0px;top:0px;}25%{background-color:yellow;left:200px;top:0px;}50%{background-color:blue;left:200px;top:200px;}75%{background-color:green;left:0px;top:200px;}100%{background-color:red;left:0px;top:0px;}}CSS3动画设置动画应运行多少次animation-iteration-count属性指定动画应运行的次数。"infinite"使动画永远持续下去：div{width:100px;height:100px;background-color:red;position:relative;animation-name:example;animation-duration:4s;animation-iteration-count:3;}@keyframesexample{0%{background-color:red;left:0px;top:0px;}25%{background-color:yellow;left:200px;top:0px;}50%{background-color:blue;left:200px;top:200px;}75%{background-color:green;left:0px;top:200px;}100%{background-color:red;left:0px;top:0px;}}CSS3动画反向或交替运行动画animation-direction属性指定是向前播放、向后播放还是交替播放动画。animation-direction属性可接受以下值：normal-动画正常播放（向前）。默认值reverse-动画以反方向播放（向后）alternate-动画先向前播放，然后向后alternate-reverse-动画先向后播放，然后向前CSS3动画案例div{width:100px;height:100px;background-color:red;position:relative;animation-name:example;animation-duration:4s;animation-direction:reverse;}@keyframesexample{0%{background-color:red;left:0px;top:0px;}25%{background-color:yellow;left:200px;top:0px;}50%{background-color:blue;left:200px;top:200px;}75%{background-color:green;left:0px;top:200px;}100%{background-color:red;left:0px;top:0px;}}CSS3动画指定动画的速度曲线animation-timing-function属性规定动画的速度曲线。animation-timing-function属性可接受以下值：ease-指定从慢速开始，然后加快，然后缓慢结束的动画（默认）linear-规定从开始到结束的速度相同的动画ease-in-规定慢速开始的动画ease-out-规定慢速结束的动画ease-in-out-指定开始和结束较慢的动画cubic-bezier(n,n,n,n)-运行您在三次贝塞尔函数中定义自己的值CSS3动画案例div{width:100px;height:50px;background-color:red;font-weight:bold;position:relative;animation:mymove5sinfinite;}#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;}@keyframesmymove{from{left:0px;}to{left:300px;}}CSS3动画指定动画的填充模式CSS动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode属性能够覆盖这种行为。在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode属性规定目标元素的样式。animation-fill-mode属性可接受以下值：none-默认值。动画在执行之前或之后不会对元素应用任何样式。forwards-元素将保留由最后一个关键帧设置的样