一、css动画相关的几个属性
| 属性 | 含义 | 理解 |
|---|---|---|
| transform | 一种CSS属性。用于修改CSS视觉格式模型的坐标空间。使用它，元素可以被移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。 | 变形 |
| translate() | CSS属性transform的一种可能值。用于移动元素。 | 平移的变形 |
| transition | 一种CSS属性。用于设置过渡样式。为一个元素在不同状态之间切换的时候定义过渡效果。比如在一个元素的不同的伪类之间切换，像是 :hover ，:active 或者通过JavaScript实现的状态变化。 | 过渡 |
| animation | 一种CSS属性。用于设置动画。是一个简写的属性，包含6个属性。 | 动画 |
二、transform
1. 语法
transform: matrix(1,2,3,4,5,6);
transform: translate(120px, 50%);
transform；scale(2, 0.5);
transform: rotate(0.5);
transform: skew(30deg, 20deg);
transform: scale(0.5) translate(-100%, -100%)
浏览器兼容前缀:
| Chrome/Safari | Firefox | IE | Opera |
|---|---|---|---|
| -webkit | -moz | -ms | -o |
2. 示例
<style>
p{
width:200px;
border: thin solid red;
-webkit-transform: translate(200px, 200px);
-moz-transform: translate(200px, 200px)
transform: translate(200px, 200px);
rotate(30deg);
}
</style>
<p>啦啦啦</p>
三、translate()
1.语法
translate(tx) /* Equal to translateX(tx) */
translate(tx, ty)
translateX(tx)
translateY(ty)
param:
- tx,ty:水平、垂直方向的移动距离。可以为 绝对距离，也可以为百分数
注意：它必须写在transform属性里面！！
2. 示例
见一、
四、transition
1.语法
它是一个简写属性。等于:
<transition-property> <transition-duration> <transition-timing-function> <transition-delay>
必不可少的是:
<transition-property> <transition-duration>
transition: margin-right 2s;
transition: margin-right 2s .5s;
transition: margin-right 2s ease-in-out;
transition: margin-right 2s ease-in-out .5s;
transition: margin-right 2s, color 1s;
Transitions可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover ，:active 或者通过JavaScript实现的状态变化。
注意:transform属性只对block级元素生效！
2.示例
<style>
p{
width:200px;
border: thin solid red;
font-size: 16px;
}
p:hover{
border: thick solid green;
font-size: 32px;
}
</style>
<p>啦啦啦</p>
五、animation
1. 语法
它是一个简写属性，等于:
<animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-derection> <animation-fill-mode>
各属性详细解释如下表：
| 属性 | 作用 |
|---|---|
| name | 用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致 |
| duration | 指定元素播放动画所持续的时间 |
| timing-function | 规定速度效果的速度曲线，是针对每一个小动画所在时间范围的变换速率 |
| delay | 定义在浏览器开始执行动画之前等待的时间，是整个animation执行之前等待的时间 |
| iteration-count | 定义动画的播放次数，可选具体次数或者无限(infinite) |
| direction | 设置动画播放方向：normal(按时间轴顺序),reverse(时间轴反方向运行),alternate(轮流，即来回往复进行),alternate-reverse(动画先反运行再正方向运行，并持续交替运行) |
| fill-mode | 控制动画结束后，元素的样式，有四个值：none(回到动画没开始时的状态)，forwards(动画结束后动画停留在结束状态)，backwords(动画回到第一帧的状态)，both(根据animation-direction轮流应用forwards和backwards规则)，注意与iteration-count不要冲突(动画执行无限次) |
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
animation: 3s linear 1s slidein;
/* duration | timing-function | delay | name */
animation: 3s slidein;
/* @ duration | name */
2.示例
<style>
.lala {
width:200px;
border: thin solid red;
margin-left: 10px;
font-size: 16px;
animation: mymove 4s linear 0s infinite;
-webkit-animation: mymove 4s linear 0s infinite;
-moz-animation: mymove 4s linear 0s infinite;
-o-animation: mymove 4s linear 0s infinite;
}
@-webkit-keyframes mymove {
from {
margin-left: 0;
background:yellow;
}
to {
margin-left:100%;
background: green;
}
}
@-moz-keyframes mymove {
from {
margin-left: 0;
background:yellow;
}
to {
margin-left:100%;
background: green;
}
}
@-o-keyframes mymove {
from {
margin-left: 0;
background:yellow;
}
to {
margin-left:100%;
background: green;
}
}
@keyframes mymove {
from {
margin-left: 0;
background:yellow;
}
to {
margin-left:100%;
background: green;
}
}
</style>
<p class="lala">啦啦啦</p>
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation