Transition及动画

Transition及动画

transition过渡动画属性

配合hover使用

离开和进入都需要动画，在本身添加过渡

只想进入有动画，在hover处添加

transition-property 过渡样式，默认是all

值	描述
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-duration

规定完成过渡效果需要花费的时间（以秒或毫秒计）,默认是0s

值	描述
time	规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。

transition-delay 延迟时间，默认是0s

值	描述
time	指定秒或毫秒数之前要等待切换效果开始

transition-timing-function属性指定切换效果的速度，默认是ease

值	描述
linear	匀速过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	加速的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	减速的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	先加速后减速的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(x1,y1,x2,y2)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

steps 实现一个关键逐帧动画

Animation

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。 阅读关于 initial的介绍。
inherit	从父元素继承属性。 阅读关于 initinherital的介绍。

与transition的区别

• 不需要hover出现动效
• 多重过渡

mymove是动画名字

animation-name动画名字

必须要有动画名称

animation-duration 动画时长（默认为0）

animation-timing-function动画的播放方式

是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动

画的播放方式。

linear	动画从头到尾的速度是匀速的。	测试
ease	默认。动画以低速开始，然后加快，在结束前变慢。	测试
ease-in	动画以低速开始。	测试
ease-out	动画以低速结束。	测试
ease-in-out	动画以低速开始和结束。	测试
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay 动画的延迟时间

值	描述	测试
time	可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0

animation-iteration-count 定义动画的循环播放次数（默认为1次）

值	描述	测试
n	一个数字，定义应该播放多少次动画	测试 »
infinite	指定动画应该播放无限次（永远）

animation-deirection 定义动画方向

值	描述	测试
normal	默认值。动画按正常播放。	测试 »
reverse	动画反向播放。	测试 »
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。	测试 »
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

animation--play-state属性指定动画是否正在运行或已暂停。

值	描述	测试
paused	指定暂停动画	测试 »
running	指定正在运行的动画

animation-fill-mode 定义动画执行的第一帧或者最后一帧停留的位置

animation-fill-mode:forwards保留最后一帧

值	描述
none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值，保留最后一帧的动态变化。
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

简写

animation:move1 2s linear 2 forwards

ainmation和transition的区别

transition需要配合hover使用触发

transform

translate平移

translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。

perspective 视距

加在父元素身上，视距便于查看3D效果

rotate旋转（默认值是绕z轴旋转）

transfrom:rotateX(50deg)

x轴和y轴，围绕中线作为轴

z轴围绕中心点转

正值就是顺时针，负值就是逆时针

rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转(x y z值为0或1,1表示该轴有值，最后一个参数共同角度，三轴同时动)
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
roateX(45deg) rotateY(45)	同时X轴，Y轴动
roateX(45deg) rotateY(45) rotateZ(45deg)	X轴，Y轴 z轴 动（先z动 再y动 再z动，有顺序，按轴系先后顺序）

transform-origin 改变元素基点

正值都是轴系的顺时针方向

• 第一个值是水平方位
• 第二个值是垂直方位

scale缩放

1为原比例，不缩放

0-1为缩小 1以上为放大，最小值为0

skew倾斜

/*  一个参数是x和y同时动 */
transform:skew(45deg)

3D