CSS3过渡、动画、2D/3D转换

transition: 过渡属性过渡时长运动速度延迟时间;
transition-property: 属性名 - 告诉系统哪个属性需要执行过渡效果.
transition-duration: 时长 - 告诉系统过渡效果的持续的时长.
transition-delay: 时长 - 告诉系统延迟多少秒之后才开始执行过渡动画.
transition-timing-function: 取值 - 告诉系统过渡动画的执行速度.

取值	描述
linear	规定以相同速度开始至结束的过渡效果
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in	规定以慢速开始的过渡效果
ease-out	规定以慢速结束的过渡效果
ease-in-out	规定以慢速开始和结束的过渡效果

在这里插入图片描述

二、使用过渡的三要素

必须要有属性发生变化.
必须告诉系统哪个属性需要执行过渡效果.
必须告诉系统过渡效果持续时长

三、注意点

当多个属性需要同时执行过渡效果时用,隔开即可.

        div {
            width: 100px;
            height: 100px;
            background-color: red;
            transition-property: width, height, background-color;
            transition-duration: 5s, 5s, 5s;
        }
         /* :hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上 */
        div:hover {
            width: 200px;
            height: 200px;
            background-color: black;
        }

四、过渡的连写格式
transition: 过渡属性过渡时长运动速度延迟时间;

        div {
            width: 100px;
            height: 50px;
            transition: width 5s linear 0s, height 5s linear 0s, background-color 5s linear 0s;
            /* 可以省略后两个参数 */
            /*transition: width 5s, background-color 5s, height 5s;*/
            /* 如果多个属性运动速度/持续时间/延迟时间相同,可以统一这样写 */
            /*transition: all 5s;*/
        }
        div:hover{
            width: 300px;
            height: 300px;
            background-color: blue;
        }

注意点

和分开写一样, 如果想给多个属性添加过渡效果也是用,隔开即可
连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为transition:all 0s;

五、使用过渡模块的步骤
4. 先编写好基本的界面
5. 修改需要过渡的属性
6. 然后再给被修改属性的那个元素添加过渡即可

动画模块

跳转到目录

animation:动画名称动画时长动画运动速度延迟时间执行次数往返动画;
animation-name: 动画名 - 告诉系统要执行哪个动画.
animation-duration: 时长 - 告诉系统动画持续的时长.
animation-timing-function: 取值 - 告诉系统动画的执行速度.(取值同过渡动画这个属性的取值)
animation-iteration-count: 次数 - 告诉系统需要执行几次动画.
animation-direction: 取值 - 告诉系统是否需要执行往返动画.

取值	描述
normal	默认的取值, 执行完一次之后回到起点继续执行下一次.
alternate	往返动画, 执行完一次之后往回执行下一次.

animation-play-state: 取值 - 告诉系统当前动画是否需要暂停.

取值	描述
running	执行动画.
paused	暂停动画.

animation-fill-mode: 取值 - 指定动画等待状态和结束状态的样式.

取值	描述
none	不做任何改变
forwards	让元素结束状态保持动画最后一帧的样式
backwards	让元素等待状态的时候显示动画第一帧的样式
both	让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

        .box1 {
            width: 100px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
            animation-name: sport;
            animation-duration: 5s;
        }

        @keyframes sport {
            0% {
                left: 0;
                top: 0;
            }
            25% {
                left: 300px;
                top: 0;
            }
            50% {
                left: 300px;
                top: 300px;
            }
            75% {
                left: 0;
                top: 300px;
            }
            100% {
                left: 0;
                top: 0;
            }
        }

使用动画的三个步骤
- animation-name: 动画名 - 告诉系统要执行哪个动画.
- 告诉系统我们需要自己创建一个名称叫做xxx的动画.
```
 @keyframes 动画名 {
 	   /* margin-left: 0 到 margin-left: 500px 作的动画 */
        from{
            margin-left: 0;
        }
        to{
            margin-left: 500px;
        }
    }
```
- animation-duration: 时长 - 告诉系统动画持续的时长.
  
  扫描二维码关注公众号，回复： 8812947 查看本文章

过渡和动画之间的异同
相同点:
1. 两者都是用来给元素添加动画的.
2. 两者都是系统新增的一些属性.
3. 两者都需要满足三个要素才会有动画效果.
不同点:
1. 过渡必须人为(设置:hover)的触发才会执行动画.
2. 动画不需要人为的触发就可以执行动画.
动画模块的连写格式
animation:动画名称动画时长动画运动速度延迟时间执行次数往返动画;
和过渡模块一样, 也可以省略后面的参数,只保留前面的两个参数.
animation:动画名称动画时长;
注意点

如果是简单的动画操作,可以使用from to方式创建动画

   	@keyframes move {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }

如果需要多个动画操作, 可以使用 20%, 40%, 60%...方式创建动画

    @keyframes myRotate {
        0%{
            transform: rotate(10deg);
        }
        50%{
            transform: rotate(50deg);
        }
        100%{
            transform: rotate(70deg);
        }
    }

2D转换

跳转到目录

transform: rotate(度数deg); - 旋转多少度

其中deg是单位, 代表多少度
transform: translate(水平方向px, 垂直方向px); - 水平垂直平移多少
transform: scale(水平缩放, 垂直缩放); - 按比例缩放.

注意:
1、如果取值是1, 不变
2、如果取值大于1, 放大
3、如果取值小于1, 缩小
4、如果水平和垂直缩放都一样, 那么可以简写为一个参数.
transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5); - 多个转换连写

注意:
1、如果需要进行多个转换,那么用空格隔开
2、2D转换模块会修改元素的坐标系,所以旋转之后再平移就不是水平平移的.
形变中心点
transform-origin:水平方向取值, 垂直方向取值;
注意:

默认情况下所有的元素都是以自己的中心点作为形变中心点来旋转,我们可以通过transform-origin:来修改旋转的中心点.

取值的形式

transform-origin: 200px 0px; - 具体像素
transform-origin: 50% 50%; - 百分比
transform-origin: center center; - 关键字

        ul li:first-child{
            background-color: red;
            transform: rotate(30deg);
        }
        ul li:nth-child(2){
            background-color: green;
            transform: rotate(50deg);
        }
        ul li:last-child{
            background-color: blue;
            transform: rotate(70deg);
        }

在这里插入图片描述

旋转轴向
默认情况下所有元素都是围绕Z轴进行旋转.transform:rotateZ(45deg).
如果修改X或Y轴旋转, 换为 rotateX或rotateY即可.
- perspective: 500px; - 透视属性,近大远小效果.
  注意点: 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

3D转换

跳转到目录

什么是2D和3D?
2D就是一个平面, 只有宽度和高度, 没有厚度
3D就是一个立体, 有宽度和高度, 还有厚度
默认情况下所有的元素都是呈2D展现的

如何让某个元素呈3D展现
和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可.

    .father{
        width: 200px;
        height: 200px;
        background-color: red;
        border: 1px solid #000;
        margin: 100px auto;
        perspective: 500px;
        transform-style: preserve-3d;
        transform: rotateY(80deg);
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: blue;
        border: 1px solid #000;
        margin: 0 auto;
        margin-top: 50px;
        transform: rotateY(45deg);
    }

在这里插入图片描述

背景尺寸属性

跳转到目录
什么是背景尺寸属性?

背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小

background-size:取值
取值:

具体像素: background-size:200px 100px;
百分比: background-size:contain;
宽度等比拉伸:background-size:auto 100px;
高度等比拉伸:background-size:100px auto;
cover: background-size:cover;
cover含义:
1. 告诉系统图片需要等比拉伸
2. 告诉系统图片需要拉伸到宽度和高度都填满元素
contain: background-size:contain ;
contain含义:
1. 告诉系统图片需要等比拉伸
2. 告诉系统图片需要拉伸到宽度或高度都填满元素