css 动画总结
一、2D、3D 转换 (transform)
让元素在一个坐标系统中变形
// 浏览器前缀
-webkit-transform
-moz-
-ms-
-o-
2D转换
-
translate(x,y) 平移
transform:translate(100px,100px) // 第二个参数可省略，默认为0 transform:translateX(100px) // X轴 transform:translateY(100px) // Y轴 -
rotate(180deg) 旋转
-
scale(w,h) 缩放
transform:scale（2） // 一个参数，等比例缩放 transform:scale(1,2) 宽放大一倍即不变，高度放大两倍 transform:scaleX(2) transform:scaleY(2) -
skew(50deg,50deg) 倾斜
X 是水平方向，Y垂直方向 （元素得是块元素）//如果第二个参数省略，默认为0 transform:skew(50deg,50deg) // x 轴倾斜50deg，y轴倾斜50degskewX(<angle>)按指定的角度沿X轴斜切变化，X轴方向平行不变，Y轴方向变切斜
图片.png
skewY(<angle>)按指定的角度沿Y轴斜切变化，Y轴方向平行不变，X轴方向变切斜
图片.png
transform-origin
transform-origin 来对元素进行原点位置改变，默认是以元素中心位置
可以设置的属性值：left、right、top、bottom、center
transform-origin:left top; // 左上角
3D转换
图片.png
-
rotateX(angle)
rotateX方法指定对象在 X轴上的旋转角度（围绕 X轴旋转）。
图片.png
-
rotateY(angle)
rotateY方法指定对象在 Y轴上的旋转角度（围绕 Y轴旋转）。
图片.png
-
rotateZ(angle)
rotateZ方法指定对象在 Z轴上的旋转角度（围绕Z轴旋转）,效果和 skew旋转一样
-
rotate3d(x,y,z,angle)
前三个参数分别表示旋转的方向x，y，z，第四个参数表示旋转的角度，参数不允许省略。
rotate3d(1,0,1,45deg) // 1 代表此方向旋转，0 代表此方向不旋转
-
translateZ(z)
-
translate3d(x,y,z)
扩展属性
- transform-style 属性指定嵌套元素是怎样在三维空间呈现（3D环绕效果）。
transform-style ：flat | preserve-3d
preserve-3d
图片.png
flat(默认)
图片.png
-
perspective 属性（给父级设置）
指定观察者与[z=0]平面的距离，使具有三维位置变换的元素产生透视效果。值越小里的越近，越大离的越远
perspective ：number | none
图片.png
图片.png
-
perspective-origin 属性，指定透视点的位置（给父级设置）
perspective-origin ： x-axis y-axisperspective-origin：top // 俯视看 （从上往下看） perspective-origin：center/50% // 平视角度看 perspective-origin：bottom // 仰视看（从下往上看） -
backface-visibility 属性
指定元素背面面向用户时是否可见
backface-visibility ： visible | hidden
实例效果
图片.png
<div>
<div class="inner"></div>
<div class="middle"></div>
<div class="outer"></div>
<div class="imooc"></div>
</div>
div {
transform-style: preserve-3d;
perspective: 500px;
perspective-origin: bottom;
}
div > .inner { transform: rotateY(67deg)}
div > .middle { transform: rotateX(45deg)}
div > .outer { transform: rotateZ(45deg)}
div > .imooc { background: url(./img/imooc.png) no-repeat center center; }
二、过渡（ transition）
允许css 的属性值在一定的时间区间平滑度过，在鼠标单击、获取焦点、被点击或对元素任何改变中触发并圆滑地以动画效果改变css 属性值。
-
transition
transition属性是一个简写属性，用于设置四个过渡属性
transition: property duration timing-function delay; transition: width 1s ease 2s; -
transition-property
设置过渡效果的 CSS 属性的名称，比如
width、 color 、opacity等属性
transition-property：none | all | propertytransition-property:width -
transition-duration
检索或设置对象过渡的持续时间，规定完成过渡效果需要花费的时间
transition-duration:1s -
transition-timing-function
检索或设置对象中过渡的动画类型
图片.png
transition-timing-function:ease
-
transition-delay
检索或设置对象延迟过渡时间
ttransition-delay:2s
例子：当鼠标经过div时，宽度由100px变成200px,设置过渡效果
div{
width:100px;
transition:width 1s ease 2s
// 属性：宽，执行时间：1s，速度曲线：ease，延时：2s
}
div:hover{
width:200px
}
如果属性设置成 all代表所有属性
三、动画 animation
animation：keyframe 名称，时间，速度曲线，延迟、播放的次数、direction
div{
animation:mymove 5s infinite;
}
@keyframes mymove {
from{
left：10px
}
to{
left：100px
}
}
兼容手机端需要加浏览器前缀
-webkit-animation:
@-webkit-keyframes name{}
-
animation-name
设置对象所应用的对象名称
-
animation-duration
规定完成动画所花费的时间，以秒或毫秒计
-
animation-timing-function
规定动画的速度曲线
属性值： linear、ease、ease-in 、ease-out 等 -
animation-delay
规定在动画开始之前的
-
animation-iteration-count
规定动画应该播放的次数
animation-iteration-count:n（1,2,3....）|infinite (无限循环) -
animation-direction
规定是否应该轮流反向播放动画，默认 normal
animation-direction:alternate; -
animation-fill-mode
规定当动画不播放时（当动画完成或者动画有延迟未开始播放时），要应用到元素的样式。
animation-fill-mode：none | forwards | backwards | both | initial | inherit
参数说明：- none：默认值，不设置对象动画之外的状态
- forwards：设置对象状态为动画结束时的状态
- backwards：设置对象状态为动画开始的状态
- both：设置对象为动画结束或开始的状态
-
animation-play-state
指定动画是否正在运行或已暂停
animation-play-state：paused | running
参数说明：- pasued：指定暂停动画
- running：默认值，指定正在运行的动画
will-change
提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置
增强页面渲染性能
参数说明：
- auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化。
- scroll-position：表示将要改变元素的滚动位置
- contents：表示将要改变元素的内容
- <custom-ident>:明确指定将要改变的属性与给定的名称
- <animateable-feature>：可动画的一些特征值，比如 left、top、margin等。
使用
-webkit-will-change:transform // 属性名称
-moz-will-change:transform
