【CSS学习笔记】CSS 的 Transform、Transition、 Animation 简单理解使用

Transform（变换）

Transform属性可以将元素进行2D或3D转换，可以将元素旋转，缩放，移动，倾斜等。
语法:

transform: none|transform-functions;

常用的Transform的方法有：

1. rotate(angle)
   将元素旋转特定角度；例如，transform:rotate(30edg)，旋转30度；
2. translate(x,y)
   将元素从当前位置向x轴y轴移动x或y个位置；例如，transform:translate(20px,30px)，向右移动20px，向下移动30px；
3. scale(x,y)
   进行缩放，根据给定的x和y，在x轴或者y轴进行缩放；例如，transform:scale(0.5,2)，在x轴缩小一半，在y轴放大一倍；
4. skew(x-angle,y-angle)
   根据x轴和y轴转动给定的角度；例如，skew(30deg,20deg)，围绕x轴把元素转动30度，围绕y轴把元素转动20度。

---

transition（过渡）

transition 为当前元素设置过渡效果。常常搭配:hover等可以引起元素属性变化的伪类一起使用，可以将元素的单个或多个属性的值A平滑的过渡为值B。
语法：

transition: property duration timing-function delay;

transition的属性有：

• property： 值为all 或者 none 或者 指定CSS属性的name，指定过渡会变化的css属性；
• duration： 过渡持续的时间，需要多少秒或毫秒才能完成（必填）；
• timing-function： 过渡效果的转速曲线（加速度）；
• delay： 过渡效果开始的时间，延迟多少时间开始；

例子：

div{
    width:100px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}

---

animation（动画）

animation 属性是一个简写属性，用于设置一个关键帧属性和六个动画属性。
语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

这一个关键帧属性和六个动画属性分别是：

• name： 要绑定到选择器的关键帧的名字
• duration： 动画持续的时间；
• timing-function：动画效果的转速曲线（加速度）；
• delay： 动画效果开始的时间，延迟多少时间开始；
• iteration-count： 定义动画播放次数，默认是1，可以设置为infinite一直播放；
• direction： 指定是否应该轮流反向播放动画，以及怎样正向反向播放动画；
• fill-mode： 规定当动画不播放时，元素的样式；
• play-state： 指定动画是否正在运行或已暂停，默认为running，设置paused暂停；

@keyframes
我们需要使用@keyframes规则来定义关键帧，使用@keyframes规则，可以创建动画。
创建动画是通过逐步改变CSS样式来实现的。
可以使用关键字"from"和"to"来规定第一帧和最后一帧，也可以使用百分比来规定某一时间的某一帧。
例如：

@keyframes myanimation
{
    from {left:0px;}
    to {left:200px;}
}

@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

---