利用CSS3制作动画(变形、过渡、动画)

CSS3变形

变形介绍

CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果

每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。

CSS3变形是通过tranform实现的，可以用在块元素和行内元素上，该属性可以旋转、缩放、移动元素。

transform:[transform-function] *; 设置变形函数，可以是一个，也可以是多个，中间以空格分开。

变形函数
translate()	平移函数，基于X、Y坐标重新定位元素的位置
scale()	缩放函数，可以使任意元素对象尺寸发生变化
rotate()	旋转函数，取值是一个度数值
skew()	倾斜函数，取值是一个度数值

CSS3 的3D变形函数：translate3d()平移函数、scale3d()缩放函数、rotate3d()旋转函数。

CSS3变形包括2D变形和3D变形，3D变形使用和2D变形类似，这里我们只详聊2D变形。

浏览器兼容性

属性名	IE	Firefox	Chrome	Opera	Safari
2D transform	9+	3.5+	4.0+	10.5+	3.1+

CSS3的2D变形虽然得到了众多浏览器支持，但实际使用的时候需要添加浏览器各自的私有属性(前缀)

IE 9中使用2D变形时，需要添加-ms-前缀，在IE10以后开始支持标准版本。
Firefor3.5至Firefox15.0版本需要添加前缀-moz-，在Firefox16以后开始支持标准版本。
Chrome4.0开始支持2D变形，在实际使用中需要添加前缀-webkit-
Opera10.5开始需要添加前缀-o-
Safari 3.1开始支持2D变形，在实际使用中需要添加前缀-webkit-

不需要死记硬背,由于浏览器不断更新，具体哪个浏览器版本支持什么样的CSS属性。推荐一个在线网站https://www.caniuse.com/

2D变形

在二维空间和三维空间，元素可以被扭曲、移动、旋转。只不过2D变形是在X轴和Y轴上变换，也就是水平轴和垂直轴。

3D变形除了X轴和Y轴外，还有一个Z轴。

1.2D位移

位移指的是将元素从一个位置移动到另一个指的的位置上，可以使用translate()函数元素在X轴、Y轴上任意移动而不影响在X轴或Y轴上的其他元素。

语法：translate(tx,ty)；

tx：表示X轴（横坐标）移动的向量长度，正值表示元素向X轴右边移动，负值向X轴左边移动。

ty：表示Y轴（纵坐标）移动的向量长度，正值表示元素向Y轴下边移动，负值向Y轴上面移动。

tx或ty的单位是px，也可以是百分比。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>translate的使用</title>
    <style>
        li{
    
    
            list-style: none;
            float: left;
            width: 80px;
            line-height: 40px;
            background: rgba(242, 123, 5, 0.61);
            border-radius: 6px;
            font-size: 16px;
            margin-left: 3px;
        }
        li a{
    
    
            text-decoration: none;
            color: #fff;
            display: block;
            text-align: center;
            height: 40px;

        }
        li a:hover{
    
    
            background: rgba(242, 88, 6, 0.87);
            border-radius: 6px;
            /*设置a元素在鼠标移入时向右下角移动4px，8px*/
            transform: translate(4px,8px);
            -webkit-transform: translate(4px,8px);
            -o-transform: translate(4px,8px);
            -moz-transform: translate(4px,8px);
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#">服装城</a></li>
    <li><a href="#">美妆馆</a></li>
    <li><a href="#">超市</a></li>
    <li><a href="#">全球购</a></li>
    <li><a href="#">闪购</a></li>
    <li><a href="#">团购</a></li>
    <li><a href="#">拍卖</a></li>
    <li><a href="#">金融</a></li>
</ul>
</body>
</html>

鼠标悬停上面产生的效果

当translate()函数只有一个值的时候，则表示水平偏移；如果只设置垂直偏移，就必须设置第一个参数为0，第二个值是偏移量。如果只想设置一个方向上的位移还可以：

translateX（tx）

表示只设置X轴的位移，transform：translate(100px,0），实际上等于transform：translateX（100px）。
translateY（ty）

表示只设置Y轴的位移，transform：translate(0,100px），实际上等于transform：translateY（100px）。

2.2D缩放

scale()函数能够用来缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例，默认值为1,0~0.99的任意值都可以使元素缩小，而任何大于1的值都能让元素放大。
scale()可以接收一个值，也可以接受两个值，只有一个值时，第二个值默认和第一个值相等。

语法：

scale(sx,sy)	
或
scale(sx)

sx：指定横向坐标（宽度）方向的缩放量。

sy：指定纵向坐标（高度）方向的缩放量。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>scale的使用</title>
    <style>
        li{
     
     
            list-style: none;
            float: left;
            width: 80px;
            line-height: 40px;
            background: rgba(242, 123, 5, 0.61);
            border-radius: 6px;
            font-size: 16px;
            margin-left: 3px;
        }
        li a{
     
     
            text-decoration: none;
            color: #fff;
            display: block;
            text-align: center;
            height: 40px;

        }
        li a:hover{
     
     
            background: rgba(242, 88, 6, 0.87);
            border-radius: 6px;
            /*设置a元素在鼠标移入时放大1.5倍显示*/
            transform: scale(1.5);
            -webkit-transform: scale(1.5);
            -moz-transform: scale(1.5);
            -o-transform: scale(1.5);
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#">服装城</a></li>
    <li><a href="#">美妆馆</a></li>
    <li><a href="#">超市</a></li>
    <li><a href="#">全球购</a></li>
    <li><a href="#">闪购</a></li>
    <li><a href="#">团购</a></li>
    <li><a href="#">拍卖</a></li>
    <li><a href="#">金融</a></li>
</ul>
</body>
</html>

除了使用scale()函数设置元素X轴和Y轴的缩放，实际上也可以仅设置沿着X轴或Y轴方向缩放。

scaleX(sx)：表示只设置X轴的缩放，transform：scale(2,0)实际上等于transform：scaleX(2)。
scaleY(sy)：表示只设置Y轴的缩放，transform：scale(0,2)实际上等于transform：scaleX(2)。

3.2D倾斜

skew()函数能够让元素倾斜显示，可将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

语法：

skew(ax,ay)

或

skew(ax)

ax：指定元素水平方向（X轴）的倾斜角度。

ay：指定元素垂直方向（Y轴）的倾斜角度。

ax和ay是角度值，单位用deg（°）表示。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>skew的使用</title>
    <style>
        li{
     
     
            list-style: none;
            float: left;
            width: 80px;
            line-height: 40px;
            background: rgba(242, 123, 5, 0.61);
            border-radius: 6px;
            font-size: 16px;
            margin-left: 3px;
        }
        li a{
     
     
            text-decoration: none;
            color: #fff;
            display: block;
            text-align: center;
            height: 40px;

        }
        li a:hover{
     
     
            background: rgba(242, 88, 6, 0.87);
            border-radius: 6px;
            /*设置a元素在鼠标移入时向左下角倾斜*/
            transform: skew(40deg,-20deg);
            -webkit-transform: skew(40deg,-20deg);
            -moz-transform: skew(40deg,-20deg);
            -o-transform: skew(40deg,-20deg);
            /*transform: skewX(40deg);*/
            /*-webkit-transform: skewX(40deg);*/
            /*-moz-transform: skewX(40deg);*/
            /*-o-transform: skewX(40deg);*/
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#">服装城</a></li>
    <li><a href="#">美妆馆</a></li>
    <li><a href="#">超市</a></li>
    <li><a href="#">全球购</a></li>
    <li><a href="#">闪购</a></li>
    <li><a href="#">团购</a></li>
    <li><a href="#">拍卖</a></li>
    <li><a href="#">金融</a></li>
</ul>
</body>
</html>

除了使用skew()函数设置元素X轴和Y轴的倾斜外，实际上也可以仅设置沿着X轴或Y轴方向倾斜。

skewX(ax)：表示只设置X轴的倾斜，transform：skew(20deg，0)实际上等于transform：skewX(20deg)。
skewX(ax)：表示只设置Y轴的倾斜，transform：skew(0，20deg)实际上等于transform：skewY(20deg)。

修改示例中的代码

li a:hover{
    
    
            background: rgba(242, 88, 6, 0.87);
            border-radius: 6px;
    
            /*设置a元素在鼠标移入时沿水平方向倾斜*/
            transform: skewX(40deg);
            -webkit-transform: skewX(40deg);
            -moz-transform: skewX(40deg);
            -o-transform: skewX(40deg);
        }

4.2D旋转

rotate()函数能够让元素在二维空间里绕着一个指定的角度旋转，这个元素对象可以是行内元素也可以是块元素。旋转的角度值如果是正值，元素相对原来中心顺时针旋转。如果是负值，元素相对原点中心逆时针旋转。

语法：

rotate(a)；

a是角度值，单位使用deg表示，角度值如果是正值，元素相对原来中心顺时针旋转。如果是负值，元素相对原点中心逆时针旋转。

没有添加旋转效果

添加旋转后的效果

rotate()函数只是旋转，而不会改变元素的形状。skew()函数是倾斜，元素不会旋转，会改变元素的形状

CSS3过渡

过渡简介

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等。

CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡。

浏览器兼容性

属性名	IE	Firefox	Chrome	Opera	Safari
transition	10+	4.0+	4.0+	10.5+	3.1+

过渡属性的使用

transition:transition-property  transition-duration  transition-timing-function   transition-delay

1.过渡属性（transition-property）定义转换动画的CSS属性名称

IDENT：指定的CSS属性（width、height、background-color属性等）
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

2.过渡所需的时间（ transition-duration) 定义转换动画的时间长度

即从设置旧属性到换新属性所花费的时间，单位为秒（s）

3.过渡动画函数（ transition-timing-function ）

指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式

常见的过渡动画
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）

4.过渡延迟时间（ transition-delay ）

指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
0：默认值，元素过渡效果立即执行

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>transition-property的使用</title>
    <style>
        div{
     
     
            background-color: red;
            width: 200px;
            height: 200px;
            /*指定动画过渡的CSS属性 过渡时间 过渡动画 延迟时间*/
            transition:  background-color 2s ease-in-out 3s;
            -moz-transition:  background-color 2s ease-in-out 3s;
            -webkit-transition:  background-color 2s ease-in-out 3s;
            -o-transition:  background-color 2s ease-in-out 3s;
        }
        div:hover{
     
     
            background-color: yellow;

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

过渡的触发机制

如果没有鼠标移入的效果去触发过渡，其实div是不会发生任何变化的。伪类hover是触发过渡机制的一种。还有哪些触发方法呢?

伪类触发：：hover、：active、:focus、checked等。
媒体查询：通过@media属性判断设备的尺寸，方向等。
JavaScript触发：用JavaScript脚本触发。

下面总结一下transition实现过渡动画的使用步骤：

(1)在默认样式中声明元素的初始状态样式。

(2)声明过渡元素最终状态样式，如悬浮状态。

(3)在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3动画

CSS3动画简介

animation实现动画主要由两个部分组成

通过类似Flash动画的关键帧来声明一个动画
在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

浏览器兼容性

属性名	IE	Firefox	Chrome	Opera	Safari
animation	10+	5.0+	4.0+	12+	4.0+

CSS3动画的使用过程

animation制作动画的步骤：

通过关键帧（@keyframes）来声明一个动画。
找到要设置动画的元素，并且调用关键帧声明的动画。

1.设置关键帧

@keyframes语法

@keyframes IDENT {
    
    
  from {
    
    /*CSS样式写在这里*/}
  percentage {
    
    /*CSS样式写在这里*/}
  to {
    
    /*CSS样式写在这里*/}
}

/*也可以将关键字from和to换成百分比*/
@keyframes IDENT {
    
    
  0% {
    
    /*CSS样式写在这里*/}
  percentage {
    
    /*CSS样式写在这里*/}
  100% {
    
    /*CSS样式写在这里*/}
}

其中IDENT就是一个动画名称，可以取一个任意定义的动画名称，当然语义化一点会更好。percentage就是一个百分比，用来定义某个时间段的动画效果。

@keyframes spread {
    
    
  0% {
    
    width:0;}
  33% {
    
    width:23px;}
  66% {
    
    width:46px;}
  100% {
    
    width:69px;}
}

上面代码通过@keyframes声明了一个名为spread的动画，它的动画从0%开始到100%时结束，同时还经历了33%和66%两个过程。简单来说，这个名为spread的动画一共有四个关键帧，实现以下动画效果：

spread动画在0%（第一帧）时元素宽度为0px。
在33%（第二帧）时元素宽度为23px。
在66%（第三帧）时元素宽度为46px。
在100%（第四帧）时元素宽度为69px。

如果设置更多的关键帧，可以让画面更精细。

@keyframes是实现动画必不可少的一个属性，可是浏览器对@keyframes的兼容性影响到动画能在哪个浏览器下运行，下面就来看看它在各个主流浏览器下的支持情况。

属性名	IE	Firefox	Chrome	Opera	Safari
@keyframes	10+	5.0+	4.0+	4.0+	12.0+

写兼容的时候浏览器前缀是放在@keyframes中间

例如：@-webkit-keyframes、@-moz- keyframes

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>animation的使用</title>
    <style>
        div{
     
     
            width: 100px;
            height: 100px;
            background: red;
        }
        
        /*创建动画关键帧*/
        @keyframes spread {
     
     
            0%{
     
     
                width: 0;
                transform: translate(100px,0);
            }
            25%{
     
     
                width: 20px;
                transform: translate(200px,0);
            }
            50%{
     
     
                width: 50px;
                transform:translate(300px,0);
            }
            75%{
     
     
                width: 70px;
                transform:translate(200px,0);
            }
            100%{
     
     
                width: 100px;
                transform:translate(100px,0);
            }
        }
        @-webkit-keyframes spread {
     
     
            0%{
     
     
                width: 0;
                transform: translate(100px,0);
            }
            25%{
     
     
                width: 20px;
                transform: translate(200px,0);
            }
            50%{
     
     
                width: 50px;
                transform:translate(300px,0);
            }
            75%{
     
     
                width: 70px;
                transform:translate(200px,0);
            }
            100%{
     
     
                width: 100px;
                transform:translate(100px,0);
            }
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

2.调用关键帧

上面代码只是创建了关键帧，如果不通过CSS属性来调用这个动画，是没有任何效果的。那么怎么调用呢？

使用CSS3中animation来调用声明的动画，animation和transition属性类似，都是随着时间改变元素的属性值，区别在于：

(1)transition实现动画需要触发一个事件（hover事件、active事件等）。

(2)animation可以在不触发任何事件的情况下也能随着时间的变化来改变CSS的属性值。从而达到动画效果

animation的语法和其他几个常用属性：

/*
animation:动画名称 动画的播放时间 动画的播放方式 开始播放动画的时间 动画的播放次数 动画的播放方向 动画的播放状态 动画时间外属性
*/
animation: animation-name  animation–duration  animation-timing-function animation-delay animation-iteration-count  animation-direction  animation-play-state  animation-fill-mode;

(1)动画的名字（animation-name）

(2)动画的播放时间（animation–duration）

(3)动画的播放方式（animation-timing-function）

(4)开始播放动画的时间（animation-delay ）

这三个可以对照前面过渡的过渡时间、过渡方式、延迟时间学习

(5)动画的播放次数（animation-iteration-count）

值通常为整数，默认值为1
特殊值infinite，表示动画无限次播放

(6)动画的播放方向（animation-direction）

normal，动画每次都是循环向前播放
alternate，动画播放为偶数次则向前播放

(7)动画的播放状态（animation-play-state）

running将暂停的动画重新播放
paused将正在播放的元素动画停下来

(8)动画发生的操作（animation-fill-mode）

forwards表示动画在结束后继续应用最后关键帧的位置
backwards表示会在向元素应用动画样式时迅速应用动画的初始帧
both表示元素动画同时具有forwards和backwards的效果

div{
    
    
            width: 100px;
            height: 100px;
            background: red;
    
            /*调用动画*/
            animation: spread 2s linear;
            -webkit-animation: spread 2s linear;
            -moz-animation: spread 2s linear;
            -o-animation: spread 2s linear;
			
    		/*给动画加上了循环*/
            /*animation: spread 2s linear infinite;*/
            /*-webkit-animation: spread 2s linear infinite;*/
            /*-moz-animation: spread 2s linear infinite;*/
            /*-o-animation: spread 2s linear infinite;*/
}