css3动画学习笔记

最新推荐文章于 2023-06-09 16:37:38 发布

weixin_34124651

最新推荐文章于 2023-06-09 16:37:38 发布

阅读量117

点赞数

原文链接：https://my.oschina.net/tongjh/blog/1920793

版权

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-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

转载于:https://my.oschina.net/tongjh/blog/1920793