animation animation-name:动画的名字 animation-duration:动画完成一个周期所花费的时间(秒/毫秒) animation-timing-function:动画的速度曲线 (linear ease ease-in ease-out ease-in-out 贝塞尔曲线) animation-delay:动画何时开始 animation-iteration-count:动画被播放的次数 number/infinite(无限循环) animation-direction:动画是否在下一周期逆向的播放 normsl/alternate(反向播放) animation-play-state:动画是否正在运行或暂停 paused(暂停)/running(正在播放) animation-fill-mode:动画时间之外的状态 （和延迟连用 ） – forwards(保留动画结束时的状态) – backwards(不会保留动画结束时的状态) – both(上面两种状态都有)
规定动画 @keyframes name{ from{} to{} } @keyframes name{ 0%{} 10%{} 20%{} 30%{} 40%{} 50%{} 60%{} 70%{} 100%{} }
动画属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; /*动画名字（动画的名字要有语义化）*/ /*animation-name:movedh ;*/ /*动画完成的时间*/ /*animation-duration: 1s;*/ /*动画播放次数*/ /*animation-iteration-count: 3;*/ /*animation-iteration-count: infinite;*/ /*综合写法*/ animation: movedh 1s 2s infinite; } div:hover{ /*播放/暂停*/ animation-play-state:paused; } /*关键帧*/ @keyframes movedh{ from{ width: 100px; } to{ width: 1000px; } } </style> </head> <body> <div></div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrap{ width: 500px; height: 500px; border: 1px solid red; margin: 100px auto; position: relative; } .box{ width: 100px; height: 100px; background: yellow; position: absolute; animation: movedh 2s infinite alternate; } @keyframes movedh{ 0%{ left:0; top:0; } 25%{ left:400px; top:0; border-radius:50% ; background: -webkit-linear-gradient(red,blue); } 50%{ left:400px; top:400px; } 75%{ left:0px; top:400px; border-radius:50% ; } 100%{ left:0px; top:0; } } </style> </head> <body> <div class="wrap"> <div class="box"></div> </div> </body> </html>transform-origin:基点(旋转中心点) 定义x轴的写法 :left/center/right/length/% 定义Y轴的写法 :top/center/bottom/20px/50% transform-origin:x y;
等价写法
transform: translate3d(30px,30px,800px)transform:translateZ(800px) translateX(30px) translateY(30px);transform:translateZ(800px) translate(30px,30px);transform-style:把2D转换成3D/ preserve-3d; perspective: 像素px;(景深的值越小，用户的视觉就在元素的里面，值越大，用户的视觉就在元素的外面) perspective 属性定义 3D 元素视图的距离，以像素计。 当元素定义 perspective 属性时，其子元素会获得透视效果 perspective翻译过来叫 景深
基本属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background: red; margin: 100px auto; transition: 1s; /*基点就是元素旋转的中心点*/ /*transform-origin: left top;*/ /*transform-origin: left bottom;*/ /*transform-origin: left;*/ /*transform-origin: center;*/ /*transform-origin: right bottom;*/ /*像素写法*/ /*transform-origin:0 0 ;*/ /*transform-origin:200px 200px ;*/ /*百分比*/ /*transform-origin:0 100% ;*/ /*transform-origin:100% 0% ;*/ /*transform-origin:50% 0;*/ } div:hover{ transform:rotate(160deg) } </style> </head> <body> <div>1212</div> </body> </html>3d属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrap{ width: 200px; height: 300px; border: 1px solid red; margin: 100px auto; position: relative; /*把父元素变成3d环境*/ transform-style: preserve-3d; /*景深*/ perspective: 1px; } .box{ width: 190px; height: 290px; background: red; position: absolute; top:5px; left:5px; transition: 1s; } .box:hover{ transform:rotateX(7360deg) rotateY(7760deg) rotateZ(7960deg) } </style> </head> <body> <div class="wrap"> <div class="box">1212</div> </div> </body> </html>