CSS3动画详解(图文教程)

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我,一起入门和进阶前端。

以下是正文。

CSS3中的变换属性:transform
CSS3中的渐变效果:transition

前言

本文主要内容:

  • 过渡:transition

  • 2D 转换 transform

  • 3D 转换 transform

  • 动画:animation

7.1 CSS3的变换类型


注:transform的兼容性如下

  • IE10、Firefox、Opera支持transform属性;
  • IE9支持替代的-ms-transform属性,仅适用于2D转换;
  • Safari和Chrome支持替代的-webkit-transform属性;
  • Opera只支持2D转换;

过渡:transition

transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。

  • 补间动画:自动完成从起始状态到终止状态的的过渡。不用管中间的状态。

  • 帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

参考链接:补间动画基础

transition 包括以下属性:

  • transition-property: all; 如果希望所有的属性都发生过渡,就使用all。

  • transition-duration: 1s; 过渡的持续时间。

  • transition-timing-function: linear; 运动曲线。属性值可以是:

    • linear 线性
    • ease 减速
    • ease-in 加速
    • ease-out 减速
    • ease-in-out 先加速后减速
  • transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。

上面的四个属性也可以写成综合属性

    transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;

    transition: all 3s linear 0s;

其中,transition-property这个属性是尤其需要注意的,不同的属性值有不同的现象。我们来示范一下。

如果设置 transition-property: width,意思是只让盒子的宽度在变化时进行过渡。效果如下:

图片 1

如果设置 transition-property: all,意思是让盒子的所有属性(包括宽度、背景色等)在变化时都进行过渡。效果如下:

图片 2

7.1.1 rotate旋转变换

  1. 最简单的2D旋转
div{
    transfrom: rotate(7deg);
    -ms-transform: rotate(7deg);    /*IE9*/
    -moz-transform: rotate(7deg);   /*Firefox*/
    -webkit-transform: rotate(7deg);/*safari和Chrome*/
    -o-transform: rotate(7deg);     /*Opera*/
}

rotateX, rotateY, rotateZ: rotateZ相当于rotate
如果要在其他向量上旋转,可以使用rotate3d(x, y, z, deg),xyz的值建立三维向量,deg则是旋转角度。

案例:小米商品详情

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 过渡</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #eeeeee;
        }

        .content {
            width: 800px;
            height: 320px;
            padding-left: 20px;
            margin: 80px auto;
        }

        .item {
            width: 230px;
            height: 300px;
            text-align: center;
            margin-right: 20px;
            background-color: #FFF;
            float: left;
            position: relative;
            top: 0;
            overflow: hidden; /* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */
            transition: all .5s; /* 从最初到鼠标悬停时的过渡 */
        }

        .item img {
            margin-top: 30px;
        }

        .item .desc {
            position: absolute;
            left: 0;
            bottom: -80px;
            width: 100%;
            height: 80px;
            background-color: #ff6700;
            transition: all .5s;
        }

        /* 鼠标悬停时,让 item 整体往上移动5px,且加一点阴影 */
        .item:hover {
            top: -5px;
            box-shadow: 0 0 15px #AAA;
        }

        /* 鼠标悬停时,让下方的橙色方形现身 */
        .item:hover .desc {
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="item">
        <img src="./images/1.png" alt="图片 3">
    </div>

    <div class="item">
        <img src="./images/2.png" alt="图片 4">

    </div>
    <div class="item">
        <img src="./images/3.jpg" alt="图片 5">

    </div>
</div>
</body>
</html>

效果如下:

图片 6

动画效果录制的比较差,但真实体验还是可以的。

工程文件:

7.1.2 skew扭曲变换

div{
    transform: skew(20deg, 10deg);    /*在X轴方向偏转20°,Y轴方向偏转10°*/
}

注意:skew没有3D和skewZ选项

2D 转换

转换是 CSS3 中具有颠覆性的一个特征,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式。

转换再配合过渡和动画,可以取代大量早期只能靠 Flash 才可以实现的效果。

在 CSS3 当中,通过 transform 转换来实现 2D 转换或者 3D 转换。

  • 2D转换包括:缩放、移动、旋转。

我们依次来讲解。

7.1.3 scale比例缩放

div{
    transform: scale(1.1, 1.1);
}

注:可以使用scaleX, scaleY, scaleZ进行单一方向上的缩放。

1、缩放:scale

格式:

    transform: scale(x, y);

    transform: scale(2, 0.5);

参数解释: x:表示水平方向的缩放倍数。y:表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。

取值:大于1表示放大,小于1表示缩小。不能为百分比。

格式举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 1000px;
            margin: 100px auto;
        }

        .box div {
            width: 300px;
            height: 150px;
            background-color: pink;
            float: left;
            margin-right: 15px;
            color: white;
            text-align: center;
            font: 400 30px/150px “宋体”;

        }

        .box .box2 {
            background-color: green;
            transition: all 1s;
        }

        .box .box2:hover {
            /*width: 500px;*/
            /*height: 400px;*/
            background-color: yellowgreen;

            /* transform:  css3中用于做变换的属性
                scale(x,y):缩放 */
            transform: scale(2, 0.5);
        }

    </style>
</head>
<body>
<div class="box">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>

</body>
</html>

效果:

图片 7

上图可以看到,给 box1 设置 2D 转换,并不会把兄弟元素挤走。

7.1.4 translate位移变换

div{
    transform: translate(100px, 20px);  /*在x方向移动100px,Y方向移动20px*/
}

注:可以使用translateX, translateY, translateZ进行单一方向上的位移。

2、位移:translate

格式:

    transform: translate(水平位移, 垂直位移);

    transform: translate(-50%, -50%);

参数解释:

  • 参数为百分比,相对于自身移动。

  • 正值:向右和向下。 负值:向左和向上。如果只写一个值,则表示水平移动。

格式举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 1000px;
            margin: 100px auto;
        }

        .box > div {
            width: 300px;
            height: 150px;
            border: 1px solid #000;
            background-color: red;
            float: left;
            margin-right: 30px;
        }

        div:nth-child(2) {
            background-color: pink;
            transition: all 1s;
        }

        /* translate:(水平位移,垂直位移)*/
        div:nth-child(2):hover {
            transform: translate(-50%, -50%);
        }
    </style>

</head>
<body>
<div class="box">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>

</body>
</html>

效果:

图片 8

上图中,因为我在操作的时候,鼠标悬停后,立即进行了略微的移动,所以产生了两次动画。正确的效果应该是下面这样的:

图片 9

应用:让绝对定位中的盒子在父亲里居中

我们知道,如果想让一个标准流中的盒子在父亲里居中(水平方向看),可以将其设置margin: 0 auto属性。

可如果盒子是绝对定位的,此时已经脱标了,如果还想让其居中(位于父亲的正中间),可以这样做:

    div {
        width: 600px;
        height: 60px;
        position: absolute;  绝对定位的盒子
        left: 50%;           首先,让左边线居中
        top: 0;
        margin-left: -300px;  然后,向左移动宽度(600px)的一半
    }

如上方代码所示,我们先让这个宽度为600px的盒子,左边线居中,然后向左移动宽度(600px)的一半,就达到效果了。

图片 10

现在,我们还可以利用偏移 translate 来做,这也是比较推荐的写法:

    div {
        width: 600px;
        height: 60px;
        background-color: red;
        position: absolute;       绝对定位的盒子
        left: 50%;               首先,让左边线居中
        top: 0;
        transform: translate(-50%);    然后,利用translate,往左走自己宽度的一半【推荐写法】
    }

7.2 使用transition制作交互动画


用jquery实现动画效果:

$(element).animate({width: "200px"}, 3000);
//$().animate(params, time, callback)

CSS3中的transition属性可以平滑改变CSS属性值

.content{
    height: 100px;
    width: 100px;
    -webkit-transition: height 600ms;
    -moz-transition: height 600ms;
    -o-transition: height 600ms;
    transition: height 600ms;
}
.content:hover{
    height: 300px;
}

上例即为高度为100px的正方形在hover下0.6s内变为300px的动画。如果需要改变多个属性,可以使用逗号隔开:

.content{
    transition: height 2s, width 2s, background 2s;
}

transition还可以包含设置渐进动画的函数,可以选择的函数有6种。

  • ease: 匀速变慢
  • linear: 匀速
  • ease-in: 加速
  • ease-out: 减速
  • ease-in-out: 加速然后减速
  • cubic-bezier: 自定义时间曲线
transition: all 0.5s ease-in-out 1s;

四个参数依次表示:属性、过渡时间、过渡函数、延迟时间

3、旋转:rotate

格式:

    transform: rotate(角度);

    transform: rotate(45deg);

参数解释:正值 顺时针;负值:逆时针。

举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 50px auto;
            color: #fff;
            font-size: 50px;
            transition: all 2s; /* 过渡:让盒子在进行 transform 转换的时候,有个过渡期 */
        }

        /* rotate(角度)旋转 */
        .box:hover {
            transform: rotate(-405deg); /* 鼠标悬停时,让盒子进行旋转 */
        }

    </style>
</head>
<body>
<div class="box">1</div>

</div>
</body>
</html>

效果:

图片 11

注意,上方代码中,我们给盒子设置了 transform 中的 rotate 旋转,但同时还要给盒子设置 transition 过渡。如果没有这行过渡的代码,旋转会直接一步到位,效果如下:(不是我们期望的效果)

图片 12

案例1:小火箭

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{
            height:100%;
        }

        body{
            background-color: #DE8910;
        }
        .rocket{
            position: absolute;
            left:100px;
            top:600px;
            height: 120px;
            transform:translate(-200px ,200px) rotate(45deg);
            transition:all 1s ease-in;
        }

        body:hover .rocket{
            transform:translate(500px,-500px) rotate(45deg);
        }
    </style>
</head>
<body>
    <img  class="rocket" src="images/rocket.png" alt="图片 13"/>
</body>
</html>

上方代码中,我们将 transform 的两个小属性合并起来写了。

小火箭图片的url:http://img.smyhvae.com/20180208-rocket.png

案例2:扑克牌

rotate 旋转时,默认是以盒子的正中心为坐标原点的。如果想改变旋转的坐标原点,可以用transform-origin属性。格式如下:

    transform-origin: 水平坐标 垂直坐标;

    transform-origin: 50px 50px;

    transform-origin: center bottom;   //旋转时,以盒子底部的中心为坐标原点

我们来看一下 rotate 结合 transform-origin 的用法举例。

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            /*background-color: #eee;*/
        }

        .box {

            width: 300px;
            height: 440px;
            margin: 100px auto;
            position: relative;
        }

        img {
            width: 100%;
            transition: all 1.5s;
            position: absolute;     /* 既然扑克牌是叠在一起的,那就都用绝对定位 */
            left: 0;
            top: 0;

            transform-origin: center bottom; /*旋转时,以盒子底部的中心为坐标原点*/
            box-shadow: 0 0 3px 0 #666;
        }

        .box:hover img:nth-child(6) {
            transform: rotate(-10deg);
        }

        .box:hover img:nth-child(5) {
            transform: rotate(-20deg);
        }

        .box:hover img:nth-child(4) {
            transform: rotate(-30deg);
        }

        .box:hover img:nth-child(3) {
            transform: rotate(-40deg);
        }

        .box:hover img:nth-child(2) {
            transform: rotate(-50deg);
        }

        .box:hover img:nth-child(1) {
            transform: rotate(-60deg);
        }

        .box:hover img:nth-child(8) {
            transform: rotate(10deg);
        }

        .box:hover img:nth-child(9) {
            transform: rotate(20deg);
        }

        .box:hover img:nth-child(10) {
            transform: rotate(30deg);
        }

        .box:hover img:nth-child(11) {
            transform: rotate(40deg);
        }

        .box:hover img:nth-child(12) {
            transform: rotate(50deg);
        }

        .box:hover img:nth-child(13) {
            transform: rotate(60deg);
        }

    </style>
</head>
<body>
<div class="box">
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
</div>
</body>
</html>

效果如下:

图片 14

7.3 使用@keyframes制作动画(关键帧)


4、倾斜

暂略。

7.3.1 @keyframes的基本语法

@keyframes spin{
    from{
        -webkit-transform: rotateY(0);
    }
    to{
        -webkiy-transform: rotateY(-360deg);
    }    /*from和to代表0%和100%*/
}

@keyframes spin{
    0% {
        -webkit-transform: rotateY(0);
    }
    50% {
        -webkit-transform: rotateY(-180deg);
    }
    100% {
        -webkit-transfor,: rotateY(-360deg);
    }
}

@keyframes必须配合元素中定义的animation属性,用于定义动画

animation: spin 8s infinite linear alternate;

spin: 动画名称
8s:动画执行一次所需要的时间
infinite: 动画执行的次数
linear: 动画的速度函数,跟transition的速度函数相同
alternate: 表示动画正向循环完毕后反向循环
如果想对动画的运行进行控制,可以给元素增加animation-play-state属性:

div{
    animation-play-state: paused;  /*paused为暂停*/
    animation-play-state: running; /*running为开启动画*/
}

可以通过js控制这个属性来完成。

3D 转换

7.3.2 实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
                animation: firstAni 5s infinite;
                -webkit-animation: firstAni 5s infinite ;
            }
            @keyframes firstAni{
                0% {background: red; left: 0px; top: 0px;}
                25% {background: yellow; left: 200px; top: 0px;}
                50% {background: blue; left: 200px; top: 200px;}
                75% {background: green; left: 0px; top: 200px;}
                100%{background: red; left: 0px; top: 0px;}
            }
            @-webkit-keyframes firstAni{  /*适用于safari和chrome*/
                0% {background: red; left: 0px; top: 0px;}
                25% {background: yellow; left: 200px; top: 0px;}
                50% {background: blue; left: 200px; top: 200px;}
                75% {background: green; left: 0px; top: 200px;}
                100%{background: red; left: 0px; top: 0px;}
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

本文由金沙官网线上发布于Web前端,转载请注明出处:CSS3动画详解(图文教程)

您可能还会对下面的文章感兴趣: