HTML中的动画起名字,css3动画学习笔记

transition(过渡)

css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。即创建补间动画

语法 transition: property duration timing-function delay;

transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。

transition-delay 定义过渡效果何时开始。

transform(变形)

CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：

旋转 rotate

扭曲 skew

缩放 scale

移动 translate

矩阵变形 matrix

语法 transform:rotate(7deg)

none 定义不进行转换。

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。

translate(x,y) 定义 2D 转换。

translate3d(x,y,z) 定义 3D 转换。

translateX(x) 定义转换，只是用 X 轴的值。

translateY(y) 定义转换，只是用 Y 轴的值。

translateZ(z) 定义 3D 转换，只是用 Z 轴的值。

scale(x[,y]?) 定义 2D 缩放转换。

scale3d(x,y,z) 定义 3D 缩放转换。

scaleX(x) 通过设置 X 轴的值来定义缩放转换。

scaleY(y) 通过设置 Y 轴的值来定义缩放转换。

scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。

rotate(angle) 定义 2D 旋转，在参数中规定角度。

rotate3d(x,y,z,angle) 定义 3D 旋转。

rotateX(angle) 定义沿着 X 轴的 3D 旋转。

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。

skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

perspective(n) 为 3D 转换元素定义透视视图。

animation(动画)

简写属性形式 .box { animation: dropdown 8s linear 10s infinite reverse forwards; }

[animation-name] = dropdown //动画的名称

[animation-duration] = 8s //持续时间

[animation-timing-function] = linear //动画的播放速度曲线

[animation-delay] = 10s //延迟时间

[animation-iteration-count] = infinite //播放次数

[animation-direction] = reverse //播放顺序

[animation-fill-mode] = forwards//播放前或停止后设置相应样式

动画名称 (animation-name)

定义关键帧(keyframes) - 定义动画在不同阶段的状态。

@keyframes dropdown {

0%{margin-top:0px;}

10%{margin-top:0px;}

50%{margin-top:100px;}

60%{margin-top:100px;}

90%{margin-top:200px;}

100%{margin-top:200px;}

}

动画周期时长 (animation-duration)

指定一个动画周期的时长，默认值为0s，表示无动画

时间函数(animation-timing-function)

属性定义了动画的播放速度曲线。

animation-timing-function = ease | ease-in | ease-out |ease-in-out | linear | cubic-bezier(number,number,number,number)

动画延迟 (animation-delay)

定义了动画是从何时开始播放,该值以秒(s)或毫秒(ms)为单位

animation-delay = 3s

动画迭代次数 (animation-iteration-count)

定义动画播放的次数，默认值是一次

animation-iteration-count = infinite | number

动画是否反向播放 (animation-direction)

定义动画是否反方向播放

animation-direction = normal | reverse | alternate | alternate-reverse

播放前或停止后设置相应样式 (animation-fill-mode)

动画执行之前和之后如何给动画的目标应用样式

animation-fill-mode = none | forwards | backwards | both