@keyframes、transform详解与实例

转自文章  https://segmentfault.com/a/1190000004460780#articleHeader5

一、transform 和@keyframes动画的区别：

@keyframes动画是循环的，而transform 只执行一遍.

二、@keyframes

CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

• 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

• 通过 @keyframes 规则，您能够创建动画。

• @keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。

• @keyframes 它定义的动画并不直接执行，需要借助animation来运转。

• 在动画过程中，您能够多次改变这套 CSS 样式。

• 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

  百分比是指动画完成一遍的时间长度的的百分比 ，0% 是动画的开始时间，50%是动画完成一半的时间，100% 动画的结束时间。百分比后面的花括号写：在动画执行过程中的某时间点要完成的变化。

• 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

---

语法

    @keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。定义动画的名称。 合法的值： 1. 0-100% 2. from（与 0% 相同） 3. to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

例子1：

名字为gif的@keyframes ，动画完成需要的总时长为1.4s,刚开始的时候图片旋转为0度，动画完成的时候图片旋转360度

.load-border {
    width: 120px;
    height: 120px;
    background: url(../images/loading_icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear; 
}
@keyframes gif {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

例子2：

名字为mymove的@keyframes ，动画完成需要的总时长为1s,刚开始的时候图片距顶部距离为0px，0.25s后图片距顶部距离为200px，0.5s后图片距顶部的距离为100px，以此类推

.img {
    width: 120px;
    height: 120px;
    background: url(../images/icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: mymove 1s infinite linear;
}
@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

例子3：

在一个动画中改变多个 CSS 样式：

@keyframes mymove
{
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
}

---

三、下面来说说transform：

transform的含义是：改变，使…变形；转换。

transform的属性包括：rotate()（旋转） / skew()（倾斜） / scale()（比例） / translate()（位移） ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

各个属性的用法：

• transform:rotate()：旋转；其中“10deg”表示“10度”。

    transform: rotate(10deg);

• transform:skew()：倾斜；

transform: skew(20deg);

• transform:scale()：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

transform: scale(1.5);

• transform:translate()：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

transform: translate(120px,0);

• 综合在一起：(效果是动态)

transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);