title: 详解CSS3动画、过渡属性的作用
date: 2017年9月21日 00:03:26
tags: css
categories: 教程
author: "JiaWei"
让我们一起来探索 Transiton(过渡), Transform(变化) , Animation(动画)属性吧！
Transiton(过渡)
transition 属性简写：
transition: property(过渡的css属性) duration(持续时间) timing-function(过渡类型) delay(延迟过渡时间);
默认值：
transition：all 0 ease 0
详细属性值：
transition-property : //设置过渡效果的 CSS 属性的名称
transition-duration: //指定这个过渡的持续时间
transition-delay: //延迟过渡时间
transition-timing-function: 指定过渡类型，linear //线性过度，ease-in //由慢到快，ease-out //由快到慢，ease-in-out //由慢到快在到慢，cubic-bezier//贝塞尔曲线
DEMO:
鼠标移动到div上出发hover事件出发背景的过渡动画
transition-demo1.png
Transform(变化)
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
默认值
transform: skew(35deg) scale(1, 0.5) rotate(45deg) translate(10px, 20px);
skew(倾斜) scale(缩放) rotate(旋转) translate(偏移)
元素变化过渡的起始位置
语法：transform-origin: x-axis y-axis z-axis;
值: transform-origin：top left || 0% 0%//设置为左上点
参考：transform-orgin属性
详细属性:
translate(x,y) 位置偏移
translateX(x) 沿X轴偏移
translateY(y) 沿Y轴偏移
scale(x,y) 缩放
scaleX(x) 沿 X 轴的值来进行缩放
scaleY(y) 沿 Y 轴的值来进行缩放
rotate(angle) 定义 2D 旋转,在参数中规定角度
skew(x-angle,y-angle) 倾斜
skewX(angle) 定义沿着 X 轴倾斜
skewY(angle) 定义沿着 Y 轴倾斜
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 矩阵
translate3d(x,y,z) 定义 3D
translateZ(z) 定义 3D ,只是用 Z 轴的值
scale3d(x,y,z) 定义 3D 缩放
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放
rotate3d(x,y,z,angle) 定义 3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转
rotateY(angle) 定义沿着 Y 轴的 3D 旋转
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
**DEMO:
鼠标移入触发变化并形成过渡效果
transform-demo.png
**
Animation（动画）
简写:
animation: name(关键帧名) duration(动画时长) timing-function(动画类型) delay(延迟时间) iteration-count(动画播放次数)
详细属性
animation-name //指定要绑定到选择器的关键帧的名称
animation-duration //动画指定需要多少秒或毫秒完成
animation-timing-function:linear ease ease-in ease-out
ease-in-out cubic-bezier(n,n,n,n)//设置动画将如何完成一个周期
animation-delay //设置动画在启动前的延迟间隔
animation-iteration-count : Number||infinite(循环) //定义动画的播放次数
animation-direction //指定是否应该轮流反向播放动画
animation-fill-mode //规定当动画不播放时（当动画完成时,或当动画有一个延迟未开始播放时）,要应用到元素的样式
animation-play-state //指定动画是否正在运行或已暂停
initial //设置属性为其默认值
inherit //从父元素继承属性
@keyframes 关键帧
写法:
inCSS：
...
@keyframes name(关键帧名)｛
0% {
padding: 0;
}
50% {
padding: 20px;
}
100% {
padding: 100px;
}
｝
或者
@keyframes name(关键帧名)｛
form {
padding: 0;
}
to {
padding: 100px;
}
｝
兼容性写法
@keyframes mymove{}
@-moz-keyframes mymove /* Firefox /{}
@-webkit-keyframes mymove / Safari 和 Chrome /{}
@-o-keyframes mymove / Opera */{}
DEMO:
快乐的制作自己的呼吸灯效果
animation-demo.png
网友评论