CSS3新增属性
圆角
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>talk</title> <style type="text/css"> div { position: relative; width: 500px; height: 300px; border: 1px solid black; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; font-size: 24px; font-weight: bold; text-align: center; line-height: 300px; } div:before, div:after { position: absolute; content: ""; display: block; border: 1px solid black; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } div:before { width: 50px; height: 50px; bottom: -25px; right: 25px; } div:after { width: 20px; height: 20px; bottom: -50px; right: 0; } </style> </head> <body> <div>大家好，欢迎来到这里！</div> </body> </html>
转换（Transform2D）
CSS3的变形(Transform)属性，让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以移动、旋转和缩放元素。
旋转rotate
语法transform:rotate(<angle>); angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rotate</title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } a, img { border: 0; } body { font: 12px/180% Arial; } .main { width: 1000px; margin: 50px auto; position: relative; } .pic { width: 300px; height: 290px; border: 1px solid #ccc; background: #fff; box-shadow: 2px 2px 3px #aaa; } .pic img { margin: 10px 0 0 8px; width: 285px; } .pic p { text-align: center; font-size: 20px; } .pic1 { -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -ms-transform: rotate(7deg); -o-transform: rotate(7deg); transform: rotate(7deg); } .pic2 { -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -ms-transform: rotate(-8deg); -o-transform: rotate(-8deg); transform: rotate(-8deg); } .pic3 { position: absolute; top: 40px; left: 350px; z-index: 2; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); transform: rotate(-35deg); } .pic4 { position: absolute; top: 360px; left: 350px; z-index: 3; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); } .pic5 { position: absolute; top: 150px; left: 600px; z-index: 4; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); } .pic6 { position: absolute; top: 180px; left: 280px; z-index: 5; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } </style> </head> <body> <div class="main"> <div class="pic pic1"><img src="images/1.jpg"><p>2D转换</p></div> <div class="pic pic2"><img src="images/2.jpg"><p>2D转换</p></div> <div class="pic pic3"><img src="images/3.jpg"><p>2D转换</p></div> <div class="pic pic4"><img src="images/4.jpg"><p>2D转换</p></div> <div class="pic pic5"><img src="images/5.jpg"><p>2D转换</p></div> <div class="pic pic6"><img src="images/6.jpg"><p>2D转换</p></div> </div> </body> </html>
移动translate
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
translateX(x)仅水平方向移动(X轴移动);
translateY(Y)仅垂直方向移动(Y轴移动);
translate(x, y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>translateX</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto; } div > img { transform: translateX(200px); } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>translateY</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto; } div > img { transform: translateY(200px); } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>translate</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto; } div > img { transform: translate(200px, 100px); } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html>
缩放scale
scale()方法，指定对象的2D scale(2D缩放)。
scaleX(x)元素仅水平方向缩放(X轴缩放);
scaleY(y)元素仅垂直方向缩放(Y轴缩放);
scale(x, y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scaleX</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto; } div > img { transform: scaleX(.5); } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scaleY</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto; } div > img { transform: scaleY(.5); } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scale</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto; } div > img { transform: scale(.5, .5); } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html>
扭曲skew
skew()方法，指定对象skew transformation(斜切扭曲)。
三种情况
skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);
skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形);
skew(x, y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>skew</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto; } div > img { transform: skew(15deg, 15deg); } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html>
转换（Transform 3D）
rotateZ看上去与2D的旋转rotate(45deg)没有区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rotateZ</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto; } div > img { transform: rotateZ(45deg); } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html>
rotate3D X Y 伸缩之后旋转，不允许省略参数，0与非0，0就是不变化。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rotate3d</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto; } div > img { transform: rotate3d(1, 1, 1, 45deg); } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html>
translateZ 看山去无感知，应该是你视角远近
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>translateZ</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto; } div > img { transform: translateZ(200px); } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html>
translate3D
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>translate3d</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto; } div > img { transform: translate3d(200px, 200px, 200px); } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html>
scaleZ 厚度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scaleZ</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto; } div > img { transform: scaleZ(.5); } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html>
scale3D
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scale3d</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto; } div > img { transform: scale3d(.5, .5, .5); } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html>
坐标系统
针对图片位置进行旋转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>origin</title> <style type="text/css"> div { width: 1500px; height: 250px; background: #abcdef; margin: auto;} div > img { transform: rotate(45deg); transform-origin: left top; } </style> </head> <body> <div><img src="images/sprite.jpg"></div> </body> </html>
扩展属性
transform-style属性，指定嵌套元素是怎样在三维空间中呈现。
- transform-style: flat|preserve-3d;
preserve-3d可以使重叠而不重叠，要给父元素配置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform style</title> <style type="text/css"> body { background: #abcdef; } div { position: relative; width: 760px; height: 760px; margin: auto; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } div > .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateY(-45deg); background: url(images/circle_inner.png) no-repeat center center; } div > .middle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateX(-45deg); background: url(images/circle_middle.png) no-repeat center center; } div > .outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateZ(-45deg); background: url(images/circle_outer.png) no-repeat center center; } div > .imooc { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background: url(images/imooc.png) no-repeat center center; } </style> </head> <body> <div> <div class="inner"></div> <div class="middle"></div> <div class="outer"></div> <div class="imooc"></div> </div> </body> </html>
perspective属性，指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。
- perspective: number|none;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>perspective</title> <style type="text/css"> body { background: #abcdef; } div { position: relative; width: 760px; height: 760px; margin: auto; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; perspective: 500px; } div > .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateY(45deg); background: url(images/circle_inner.png) no-repeat center center; } div > .middle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateX(45deg); background: url(images/circle_middle.png) no-repeat center center; } div > .outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateZ(45deg); background: url(images/circle_outer.png) no-repeat center center; } div > .imooc { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background: url(images/imooc.png) no-repeat center center; } </style> </head> <body> <div> <div class="inner"></div> <div class="middle"></div> <div class="outer"></div> <div class="imooc"></div> </div> </body> </html>
perspective-origin属性，指定透视点的位置。
- perspective-origin: x-axis y-axis;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>perspective-origin</title> <style type="text/css"> body { background: #abcdef; } div { position: relative; width: 760px; height: 760px; margin: auto; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 500px; -moz-perspective: 500px; -ms-perspective: 500px; -o-perspective: 500px; perspective: 500px; -webkit-perspective-origin: bottom; -moz-perspective-origin: bottom; -ms-perspective-origin: bottom; -o-perspective-origin: bottom; perspective-origin: bottom; } div > .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateY(45deg); background: url(images/circle_inner.png) no-repeat center center; } div > .middle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateX(45deg); background: url(images/circle_middle.png) no-repeat center center; } div > .outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateZ(45deg); background: url(images/circle_outer.png) no-repeat center center; } div > .imooc { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background: url(images/imooc.png) no-repeat center center; } </style> </head> <body> <div> <div class="inner"></div> <div class="middle"></div> <div class="outer"></div> <div class="imooc"></div> </div> </body> </html>
backface-visibility属性，指定元素背面面向用户时是否可见。
- backface-visibility: visible|hidden;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>perspective-origin</title> <style type="text/css"> body { background: #abcdef; } div { position: relative; width: 760px; height: 760px; margin: auto; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 500px; -moz-perspective: 500px; -ms-perspective: 500px; -o-perspective: 500px; perspective: 500px; -webkit-perspective-origin: bottom; -moz-perspective-origin: bottom; -ms-perspective-origin: bottom; -o-perspective-origin: bottom; perspective-origin: bottom; } div > .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateY(45deg); background: url(images/circle_inner.png) no-repeat center center; } div > .middle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateX(45deg); background: url(images/circle_middle.png) no-repeat center center; } div > .outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateZ(45deg); background: url(images/circle_outer.png) no-repeat center center; } div > .imooc { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background: url(images/imooc.png) no-repeat center center; } </style> </head> <body> <div> <div class="inner"></div> <div class="middle"></div> <div class="outer"></div> <div class="imooc"></div> </div> </body> </html>
过渡（Transition）
− 允许css的属性值在一定的时间区间内平滑地过渡
− 在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
transition-property属性，检索或设置对象中的参与过渡的属性。
− none(没有属性改变)
− all(所有属性改变)，默认值
− property(元素属性名)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition-property</title> <style type="text/css"> body { background: #abcdef; } div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center; -webkit-transition-property: transform; -moz-transition-property: transform; -ms-transition-property: transform; -o-transition-property: transform; transition-property: transform; } div:hover { cursor: pointer; transform: rotate(180deg); -webkit-transition-property: transform; -moz-transition-property: transform; -ms-transition-property: transform; -o-transition-property: transform; transition-property: transform; } </style> </head> <body> <div></div> </body> </html>
transition-duration属性，检索或设置对象过渡的持续时间。规定完成过渡效果需要花费的时间(以秒或毫秒计) − 默认值是0。
− transition-duration: time;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition-duration</title> <style type="text/css"> body { background: #abcdef; } div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center; -webkit-transition-property: transform; -moz-transition-property: transform; -ms-transition-property: transform; -o-transition-property: transform; transition-property: transform; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -ms-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } div:hover { cursor: pointer; transform: rotate(180deg); -webkit-transition-property: transform; -moz-transition-property: transform; -ms-transition-property: transform; -o-transition-property: transform; transition-property: transform; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -ms-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } </style> </head> <body> <div></div> </body> </html>
transition-timing-function属性，检索或设置对象中过渡的动画类型。
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) |cubic-bezier(<number>, <number>, <number>, <number>);
− linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
− ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
− ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
− ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
− ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)（一般都用这个）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition-timing-function</title> <style type="text/css"> body { background: #abcdef; } div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center; -webkit-transition-property: transform; -moz-transition-property: transform; -ms-transition-property: transform; -o-transition-property: transform; transition-property: transform; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -ms-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } div:hover { cursor: pointer; transform: rotate(180deg); -webkit-transition-property: transform; -moz-transition-property: transform; -ms-transition-property: transform; -o-transition-property: transform; transition-property: transform; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -ms-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } </style> </head> <body> <div></div> </body> </html>
ransition-delay属性，检索或设置对象延迟过渡的时间。指定秒或毫秒数之前要等待切换效果开始 − 默认值为0。
− transition-delay: time;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition-delay</title> <style type="text/css"> body { background: #abcdef; } div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center; -webkit-transition-property: transform; -moz-transition-property: transform; -ms-transition-property: transform; -o-transition-property: transform; transition-property: transform; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -ms-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } div:hover { cursor: pointer; transform: rotate(180deg); -webkit-transition-property: transform; -moz-transition-property: transform; -ms-transition-property: transform; -o-transition-property: transform; transition-property: transform; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -ms-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } </style> </head> <body> <div></div> </body> </html>
transition属性，复合属性，检索或设置对象变换时的过渡。
− transition: property duration timing-function delay;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition</title> <style type="text/css"> body { background: #abcdef; } div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center; -webkit-transition: transform 2s ease-in-out 1s; -moz-transition: transform 2s ease-in-out 1s; -ms-transition: transform 2s ease-in-out 1s; -o-transition: transform 2s ease-in-out 1s; transition: transform 2s ease-in-out 1s; } div:hover { cursor: pointer; transform: rotate(180deg); -webkit-transition: transform 2s ease-in-out 1s; -moz-transition: transform 2s ease-in-out 1s; -ms-transition: transform 2s ease-in-out 1s; -o-transition: transform 2s ease-in-out 1s; transition: transform 2s ease-in-out 1s; } </style> </head> <body> <div></div> </body> </html>
动画（animation）
animation-name属性，检索或设置对象所应用的动画名称。
- animation-name: keyframename | none;
keyframename:指定要绑定到选择器的关键帧的名称; none:指定有没有动画(可用于覆盖从级联的动画)
animation-duration属性，检索或设置对象动画的持续时间
- animation-duration: time;
time指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果
animation-timing-function属性，检索或设置对象动画的过渡类型
- animation-timing-function:
ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>);
animation-delay属性，检索或设置对象动画的延迟时间。
- animation-delay: time;
可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0。
animation-iteration-count属性，检索或设置对象动画的循环次数。
- animation-iteration-count: infinite | <number>;
<number>为数字，其默认值为“1”;infinite为无限次数循环。
animation-direction属性，检索或设置对象动画在循环中是否反向运动。
- animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
normal:正常方向;
reverse:反方向运行;
alternate:动画先正常运行再反方向运行，并持续交替运行;
alternate-reverse:动画先反运行再正方向运行，并持续交替运行。
animation-fill-mode属性，规定当动画不播放时(当动画完成或当动画有延迟未开始播放时)，要应用到元素的样式。与循环属性冲突
- animation-fill-mode: none | forwards | backwards | both | initial | inherit;
none:默认值。不设置对象动画之外的状态; forwards:设置对象状态为动画结束时的状态; backwards:设置对象状态为动画开始时的状态; both:设置对象状态为动画结束或开始的状态。
animation-play-state属性，指定动画是否正在运行或已暂停。
- animation-play-state: paused | running;
paused:指定暂停动画; running:默认值，指定正在运行的动画。
animation属性
复合属性。检索或设置对象所应用的动画特效。
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animation</title> <style type="text/css"> body { background: #abcdef; } div { position: relative; width: 760px; height: 760px; margin: auto; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; } div > .inner { background-image: url(images/circle_inner.png); -webkit-animation: circle_inner linear 10s infinite; animation: circle_inner linear 10s infinite; } div > .middle { background-image: url(images/circle_middle.png); -webkit-animation: circle_middle linear 10s infinite; animation: circle_middle linear 10s infinite; } div > .outer { background-image: url(images/circle_outer.png); -webkit-animation: circle_outer linear 10s infinite; animation: circle_outer linear 10s infinite; } div > .imooc { background-image: url(images/imooc.png); } @keyframes circle_inner { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); } } @keyframes circle_middle { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @keyframes circle_outer { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } </style> </head> <body> <div> <div class="inner"></div> <div class="middle"></div> <div class="outer"></div> <div class="imooc"></div> </div> </body> </html>
Keyframes关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置。
使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。 在动画过程中可以通过@keyframes规则多次更改CSS样式的设定
@keyframes animationname {
keyframes-selector {
css-styles;
}
}
animationname:必写项，定义animation的名称。
keyframes-selector:必写项，动画持续时间的百分百分比，0-100%、from (0%)、to (100%) 。
css-styles:必写项，一个或多个合法的CSS样式属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>@KeyFrames</title> <style type="text/css"> body { background: #abcdef; } div { position: relative; width: 760px; height: 760px; margin: auto; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; } div > .inner { background-image: url(images/circle_inner.png); -webkit-animation: circle_inner linear 10s infinite; animation: circle_inner linear 10s infinite; } div > .middle { background-image: url(images/circle_middle.png); -webkit-animation: circle_middle linear 10s infinite; animation: circle_middle linear 10s infinite; } div > .outer { background-image: url(images/circle_outer.png); -webkit-animation: circle_outer linear 10s infinite; animation: circle_outer linear 10s infinite; } div > .imooc { background-image: url(images/imooc.png); } @-webkit-keyframes circle_inner { form { transform: rotateX(0deg); } 25% { transform: rotateX(45deg); } 75% { transform: rotateX(315deg); } to { transform: rotateX(360deg); } } @keyframes circle_inner { form { transform: rotateX(0deg); } 25% { transform: rotateX(45deg); } 75% { transform: rotateX(315deg); } to { transform: rotateX(360deg); } } @-webkit-keyframes circle_middle { form { transform: rotateY(0deg); } 25% { transform: rotateY(45deg); } 75% { transform: rotateY(315deg); } to { transform: rotateY(360deg); } } @keyframes circle_middle { form { transform: rotateY(0deg); } 25% { transform: rotateY(45deg); } 75% { transform: rotateY(315deg); } to { transform: rotateY(360deg); } } @-webkit-keyframes circle_outer { form { transform: rotateZ(0deg); } 25% { transform: rotateZ(45deg); } 75% { transform: rotateZ(315deg); } to { transform: rotateZ(360deg); } } @keyframes circle_outer { form { transform: rotateZ(0deg); } 25% { transform: rotateZ(45deg); } 75% { transform: rotateZ(315deg); } to { transform: rotateZ(360deg); } } </style> </head> <body> <div> <div class="inner"></div> <div class="middle"></div> <div class="outer"></div> <div class="imooc"></div> </div> </body> </html>
