CSS第三部分——过渡与动画

一、过渡（transition）

过渡（transition）是CSS3中具有颠覆性的特性之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态渐渐的过渡到另外一个状态。
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。
经常和:hover一起搭配使用。

语法：transition：要过渡的属性花费时间运动曲线何时开始；

属性（必须写）：想要变化的css属性，宽度高度，背景颜色，内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以了。如果是多个属性（非全部属性）可以写完一个后用逗号隔开写第二个。
花费时间（必须写）：单位是秒（必须写单位），比如：0.5s。
运动曲线：默认是ease（逐渐慢下来，默认），linear（匀速），ease-in（加速），ease-out（减速），ease-in-out（先加速后减速）
何时开始：单位是秒（必须写单位）可以设置延迟触发时间。默认是0s。

二、动画

1.2D转换

2D转换基于二维坐标系，向右是x轴正方向，向下是y轴正方向。

1）移动（translate）

语法：transform：translate（x，y）；
或者分开写：
语法：
transform：translateX（n）；
transform：translateY（n）；

注意：

定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%)
对行内标签没有效果

可以实现居中，配合定位使用：top:50%;transform:translateY(-50%);

<html>
    <head>
        <style>
            .one,
            .two,
            .three,
            .four {
                width: 250px;
                height: 250px;
                float: left;
            }
            .one {
                background-color: aqua;
                transform: translate(100px,80px);
            }
            .two {
                background-color: crimson;
            }
            .three {
                background-color: chartreuse;
                transform: translateX(50px);
                /* transform: translateY(150px); */
                /* translateX和translateY一次只能写一个 */
            }
            .four {
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </body>
</html>

效果图：
在这里插入图片描述

2）旋转（rotate）

语法：transform：rotate（度数）

注意：

rotate里面跟度数，单位是deg比如rotate(45deg)
角度为正时，顺时针旋转；角度为负时，逆时针旋转
默认旋转的中心点是元素的中心点

设置转换中心点

语法：transform-origin：x y；

注意：

后面的参数x和y用空格隔开
x，y默认转换的中心点是元素的中心点（50% 50%）
还可以给x，y设置像素或者方位名词（top bottom left right center）

<html>
    <head>
        <style>
            .one,
            .two,
            .three,
            .four {
                width: 250px;
                height: 250px;
                float: left;
            }
            .one {
                background-color: aqua;
                transform: rotate(45deg);
            }
            .two {
                background-color: crimson;
            }
            .three {
                background-color: chartreuse;
                transform-origin: top left;
                transform: rotate(-60deg);
            }
            .four {
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </body>
</html>

效果图：
在这里插入图片描述

3）缩放（scale）

语法：transform：scale（x，y）

注意：

其中x和y用逗号分隔
transform:scale(1,1)：宽和高都放大一倍，相对于没有放大
transform:scale(2,2)：宽和高都放大了2倍
transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
transform:scale(0.5,0.5)：缩小
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点所缩放的，而且不影响其他盒子

<html>
    <head>
        <style>
            .one,
            .two,
            .three,
            .four {
                width: 250px;
                height: 250px;
                float: left;
            }
            .one {
                background-color: aqua;
                transform: scale(1,1);
            }
            .two {
                background-color: crimson;
            }
            .three {
                background-color: chartreuse;
                transform: scale(1.2,1.2);
            }
            .four {
                background-color: fuchsia;
                transform: scale(0.5,0.5);
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </body>
</html>

效果图：
在这里插入图片描述

4）总和写法

1.同时使用多个转换，其格式为：**transform:translate() rotate() scale()…等，
2.其顺序会影响转换的效果。（先旋转会改变坐标轴方向）
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前

效果图：

2D转换总结

转换transform 我们简单理解就是变形有2D和3D之分
我们暂且学了三个，分别是位移、旋转和缩放
2D移动transform(x,y)最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
移动可以分开写，比如：translateX(x)和translateY(y)
2D旋转rotate（度数），可以实现旋转元素，度数的单位是deg
2D缩放sacle(x,y)里面参数是数字，后面不接单位，可以是小数，最大的优势，不影响其他盒子
设置中心转换点transform-origin:x y; 参数可以是百分比、像素或者是方位名词
当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前面

2.动画（animation）

动画（animation）是CSS3中具有颠覆性的特性之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

1）用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
	0% {
		width:100px;
	}
	100% {
		width:200px;
	}
}

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果。你可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%。

2）元素使用动画

div{
	width:200px;
	height:200px;
	background-color:aqua;
	margin:100px auto;
	/*调用动画*/
	animation-name:动画名称;
	/*持续时间*/
	animation-duration:持续时间;
}

动画属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称（必须）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0（必须）
animation-timing-function	规定动画的速度曲线，默认是“ease”
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite（无线循环）
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal”，还有“alternate”（逆播放）
animation-play-state	规定动画是否正在运行或暂停。默认是“running”，还有“paused”（暂停）
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

动画属性简写

语法：animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态；
例：
animation:myfirst 5s linear 2s infinite alternate;

注意：

简写属性里面不包含animation-play-state
暂停动画：animation-play-state:puased;经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接调回来：animation-direction:alternate
盒子动画结束后，停在结束位置：animation-fill-mode:forwards

<html>
    <head>
        <style>
            .one,
            .two,
            .three,
            .four {
                width: 250px;
                height: 250px;
                float: left;
            }
            @keyframes do1 {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(60deg);
                }
            }
            @keyframes do2 {
                0% {
                    transform: translate(0,0);
                }
                100% {
                    transform: translate(50px,50px);
                }
            }
            .one {
                background-color: aqua;
                animation-name: do1;
                animation-duration: 3s;
                animation-iteration-count: infinite;
            }
            .two {
                background-color: crimson;
            }
            .three {
                background-color: chartreuse;
                animation: do2 3s infinite;
            }
            .four {
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </body>
</html>

效果图（动图请自行复制代码查看）：
在这里插入图片描述

3.3D转换

3D转换基于三维坐标系，向右是x轴正方向，向下是y轴正方向，电脑屏幕向我们的方向是z轴正方向。

1）3D位移（translate）

3D移动在2D移动的基础上多加了一个可以移动的方向就是z轴方向

语法：

transform：translateX（100px）；（仅在x轴上移动）
transform：translateY（100px）；（仅在y轴上移动）
transform：translateZ（100px）；（仅在z轴上移动，z轴方向上的单元一般都是px）
transform：translate3d（x，y，z）；（其中x，y，z分别指要移动的轴的方向的距离）

2）透视（perspective）

语法：perspective：像素；

在2D平面产生近大远小视觉立体，但是只是效果二维的

如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
模拟人类的视觉位置，可认为安排一只眼睛去看
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单元是像素

透视写在被观察元素的父盒子上面的
d：就是视距，视距就是一个距离人的眼睛到屏幕的距离，视距越小，图片越大。
z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。

<html>
    <head>
        <style>
            body {
                perspective: 200px;
            }
            .one,
            .two,
            .three,
            .four {
                width: 250px;
                height: 250px;
                float: left;
            }
            .one {
                background-color: aqua;
                transform: translateZ(50px);
            }
            .two {
                background-color: crimson;
            }
            .three {
                background-color: chartreuse;
                transform: translateZ(-50px);
            }
            .four {
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </body>
</html>

效果图：
在这里插入图片描述

3）3D旋转（rotate）

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

语法：

transform：rotateX（45deg）；（沿着x轴正方向旋转45度）
transform：rotateY（45deg）；（沿着y轴正方向旋转45度）
transform：rotateZ（45deg）；（沿着z轴正方向旋转45度）
transform：rotate3d（x，y，z，deg）；（沿着自定义轴旋转deg角度）

最后一个写法的举例：

transform:rotate3d(1,0,0,45deg);
transform:rotate3d(1,1,0,45deg);

判断旋转方向由一个方法：左手准则

左右的手拇指指向x，y，z轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向（正值）

4）3D呈现（transform-style）

控制子元素是否开启三位立体环境
transform-style：flat； 子元素不开启3d立体空间（默认）
transform-style：preserve-3d； 子元素开启立体空间
代码写给父级，但是影响的是子盒子
这个属性很重要

<html>
    <head>
        <style>
            body {
                perspective: 500px;
            }
            .da {
                position: relative;
                width: 200px;
                height: 200px;
                margin: 100px auto;
                transform: rotateY(60deg);
                transform-style: preserve-3d;
            }
            .one,
            .two {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                margin: 100px auto;
                background-color: aqua;
            }
            .da .two{
                background-color: crimson;
                transform: rotateX(60deg);
            }
        </style>
    </head> 
        <div class="da">
            <div class="one"></div>
            <div class="two"></div>
        </div>
    </body>
</html>

效果图：
在这里插入图片描述