CSS过渡、变形及动画

最新推荐文章于 2024-04-29 00:45:00 发布

非早起选手

最新推荐文章于 2024-04-29 00:45:00 发布

阅读量884

点赞数 1

分类专栏：前端基础文章标签： css 动画 css3

本文链接：https://blog.csdn.net/zg0601/article/details/120914965

版权

前端基础专栏收录该内容

16 篇文章 5 订阅

订阅专栏

一、过渡（transition）

1、CSS过渡的概念

CSS 过渡是指在设置的时间内来平滑的改变属性值，和动画animation有类似效果，但是细节上有很大不同。

2、transition相关属性

①transition-property属性

用于指定应用过渡效果的CSS属性的名称。
基本语法格式：

transition-property: none | all | property;

属性值
- none：没有属性会获得过渡效果。
- all：所有属性都将获得过渡效果。
- property：定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔。

②transition-duration属性

用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。
基本语法格式：

transition-duration:time;

③transition-timing-function属性

规定过渡效果的速度曲线，默认值为“ease“。
基本语法格式：

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值
- ease：指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1)。
- linear：指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1))。
- ease-in：指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于cubic-bezier(0.42,0,1,1)。
- ease-out：指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier(0,0,0.58,1)。
- ease-in-out：指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1)。
- cubic-bezier(n,n,n,n)：定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。

④transition-delay属性

规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。
基本语法格式：

transition-delay:time;

正数:过渡动作会延迟触发。
负数：过渡动作会从该时间点开始，之前的动作被截断。

⑤transition属性

是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。
基本语法格式：

transition：property duration timing-function delay;

注意：
- 使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。
- 无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。

3、CSS过渡的简单实例

代码如下：

<style>

    h1{

        color: red;

        font-size: 20px;

    }

    .test{

        list-style: none;

    }

    .test li{

        width: 170px;

        height: 100px;

        margin: 0;

        padding: 0;

        border: 1px solid black;

        background-color: blanchedalmond;

        color: rgb(175, 174, 174);

        transition-duration: 2s;

        transition-property: border-color,background-color,color;

        transition-timing-function: ease-in;

    }

    .test li:hover{

        border-color: rgb(212, 212, 212);

        background-color: lightgrey;

        color: rgb(36, 33, 33);

    }

</style>

<body>

    <h1>请将鼠标移动到下面的矩形上：</h1>

    <div class="c1">

        <ul class="test">

            <li>本次过渡设置的属性：border-color，background-color，color</li>

        </ul>

    </div>

</body>

二、变形（transform）

1、CSS变形的概念

CSS 变形用于对元素进行旋转、缩放、移动或倾斜，和动画animation没什么关系，主要是设置元素的“外表”。
基本语法格式：

transform：none | transform-functions;

transform-function函数
- matrix（）：定义矩形变换，即基于X和Y坐标重新定位元素的位置。
- translate（）：移动元素对象，即基于X和Y坐标重新定位元素。
- scale（）：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。
- rotate（）：旋转元素对象，取值为一个度数值。
- skew（）：倾斜元素对象，取值为一个度数值。

2、2D转换

①平移

使用translate（）方法能够重新定义元素的坐标，实现平移的效果。
基本语法格式：

transform:translate(x-value,y-value);

x-value指元素在水平方向上移动的距离，y-value指元素在垂直方向上移动的距离。如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。

②缩放

scale() 方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。
基本语法格式：

transform:scale(x-axis,y-axis);

x-axis和y-axis参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是反转元素（如文字被反转），然后再缩放元素。如果第二个参数省略，则第二个参数等于第一个参数值。

③倾斜

skew()方法能够让元素倾斜显示，该函数包含两个参数值，分别用来定义X轴和Y轴坐标倾斜的角度。
基本语法格式：

transform:skew(x-angle,y-angle);

参数x-angle和y-angle表示角度值，第一个参数表示相对于X轴进行倾斜，第二个参数表示相对于Y轴进行倾斜，如果省略了第二个参数，则取默认值0。

④旋转

rotate()方法能够旋转指定的元素对象，主要在二维空间内进行操作。该方法中的参数允许传入负值，这时元素将逆时针旋转。
基本语法格式：

transform:skew(x-angle,y-angle);

参数angle表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。

3、3D转换

①rotateX()

rotateX()函数用于指定元素围绕X轴旋转。
基本语法格式：

transform:rotateX(a);

参数a用于定义旋转的角度值，单位为deg，其值可以是正数也可以是负数。如果值为正，元素将围绕X轴顺时针旋转；反之，如果值为负，元素围绕X轴逆时针旋转。

②rotateY()

rotateY()函数指定一个元素围绕Y轴旋转。
基本语法格式：

transform:rotateY(a);

参数a与rotateX(a)中的a含义相同，用于定义旋转的角度。如果值为正，元素围绕Y轴顺时针旋转；反之，如果值为负，元素围绕Y轴逆时针旋转。

③rotate3D()

在三维空间里，除了rotateX()、rotateY()和rotateZ()函数可以让元素在三维空间中旋转之外，还有一个rotate3d()函数。
基本语法格式：

rotate3d(x,y,z,angle);

x、y、z可以取值0或1，当要沿着某一轴转动，就将该轴的值设置为1，否则设置为0。Angle为要旋转的角度。

④perspective属性

perspective属性可以简单的理解为视距，主要用于呈现良好的3D透视效果。例如我们前面设置的3D旋转果并不明显，就是没有设置perspective的原因。
基本语法格式：

perspective:参数值;

perspective属性参数值可以为none或者数值（一般为像素），其透视效果由参数值决定，参数值越小，透视效果越突出。

4、CSS变形的简单实例

代码如下：

<style>

    h1{

        font-size: 20px;

    }

    #d1{

        width: 100px;

        height: 100px;

        background-color: lightgrey;

        transform: matrix(0,1,1,1,10,10);

    }

    #d2{

        width: 100px;

        height: 100px;

        background-color: lightgrey;

        /* transform: translate(80px,30px); */

    }

    #d3{

        width: 100px;

        height: 100px;

        background-color: lightgrey;

        transform: translate(80px,30px);

    }

    #d4{

        width: 100px;

        height: 100px;

        margin-left: 20px;

        background-color: lightgrey;

        transform: rotate(10deg);

    }

    #d5{

        width: 100px;

        height: 100px;

        margin-left: 20px;

        background-color: lightgrey;

        transform: rotate(-10deg);

    }

    #d6{

        width: 100px;

        height: 100px;

        margin-left: 20px;

        background-color: lightgrey;

        transform: scale(1.2);

    }

    #d7{

        width: 100px;

        height: 100px;

        margin-left: 20px;

        background-color: lightgrey;

        transform: scale(2,1.5);

    }

    #d8{

        width: 100px;

        height: 100px;

        margin-left: 20px;

        background-color: lightgrey;

        transform: scale(-2,-1.5);

    }

    #d9{

        width: 100px;

        height: 100px;

        margin-left: 20px;

        background-color: lightgrey;

        transform: skew(10deg);

    }

    #d10{

        width: 100px;

        height: 100px;

        margin-left: 20px;

        background-color: lightgrey;

        transform: skew(-10deg);

    }

    #d11{

        width: 100px;

        height: 100px;

        margin-left: 20px;

        background-color: lightgrey;

        transform: skew(-10deg,10deg);

    }#d12{

        width: 100px;

        height: 100px;

        margin-left: 20px;

        background-color: lightgrey;

        transform: rotate3d(0)

    }

    #d13{

        width: 100px;

        height: 100px;

        margin-left: 20px;

        background-color: lightgrey;

        transform: rotate3d(1,0,0.5,30deg)

    }

    #d14{

        width: 100px;

        height: 100px;

        margin-left: 20px;

        background-color: lightgrey;

        transform: rotate3d(0,0,0.5,30deg);

    }

</style>

<body class="c1">

    <h1>矩阵变换</h1>

    <br><br>

    <div id="d1"></div>

    <h1>平移</h1>

    <div id="d2"></div>

    <div id="d3"></div>

   

    <h1>旋转</h1>

    <div id="d4"></div>

    <br><br>

    <div id="d5"></div>

   

    <h1>缩放</h1>

    <div id="d6"></div>

    <br><br>

    <div id="d7"></div>

    <br><br><br><br><br>

    <div id="d8">哈哈哈哈</div>

    <br><br>

   

    <h1>斜切扭曲</h1>

    <div id="d9"></div>

    <br><br>

    <div id="d10"></div>

    <br><br>

    <div id="d11"></div>

    <br><br><br>

   

    <h1>3D转换</h1>

    <div id="d12"></div>

    <br><br>

    <div id="d13"></div>

    <br><br>

    <div id="d14"></div>

    <br><br><br>

</body>

浏览器效果可以自己看一下。

三、过渡和变形的区别

①过渡用到的属性是transition，而变形用到的属性是transform。

②过渡是指元素变化的整个过程，更加强调期间经过的过程；而变形是指从一种形状变为另一种形状，更加强调变化前后的区别。例如树苗成为参天大树是变形（transform），而小树苗在长成参天大树这期间的过程就是过渡（transition）。换言之，过渡是针对元素的属性进行的改变，而变形是针对整个元素进行的改变。

③过渡变化的中心点默认是对象的左上角，不能改变；而变形能够设置对象的中心点。

④过渡可以设置过渡时间、曲线以及延迟等；而变形不能设置这些参数，变形是瞬间完成的变化。

四、动画（animation）

1、CSS动画的概念

CSS 动画是CSS动画属性，CSS可以直接实现HTML元素的动画效果，而不是用JavaScript或者Flash。

2、animation相关属性

①@keyframes

在CSS3中，@keyframes规则用于创建动画。
基本语法格式：

@keyframes animationname {

         keyframes-selector{css-styles;}

}

animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。
keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。
css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。

②animation-name属性

用于定义要应用的动画名称。
基本语法格式：

animation-name: keyframename | none;

animation-name 属性初始值为none，适用于所有块元素和行内元素。keyframename参数用于规定需要绑定到选择器的keyframe的名称，如果值为none，则表示不应用任何动画，通常用于覆盖或者取消动画。

③animation-duration属性

用于定义整个动画效果完成所需要的时间，以秒或毫秒计。
基本语法格式：

animation-duration: time;

animation-duration 属性初始值为0，适用于所有块元素和行内元素。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。

④animation-timing-function属性

用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。
基本语法格式：

animation-timing-function:value;

animation-timing-function包括linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用属性值。

⑤animation-delay属性

用于定义执行动画效果之前延迟的时间，即规定动画什么时候开始。
基本语法格式：

animation-delay:time;

参数time用于定义动画开始前等待的时间，其单位是秒或者毫秒，默认属性值为0。animation-delay属性适用于所有的块元素和行内元素。

⑥animation-iteration-count属性

用于定义动画的播放次数。
基本语法格式：

animation-iteration-count: number | infinite;

animation-iteration-count属性初始值为1，适用于所有的块元素和行内元素。如果属性值为number，则用于定义播放动画的次数；如果是infinite，则指定动画循环播放。

⑦animation-direction属性

定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。
基本语法格式：

animation-direction: normal | alternate;

animation-direction 属性初始值为normal，适用于所有的块元素和行内元素。该属性包括两个值，默认值normal表示动画每次都会正常显示。如果属性值是"alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等）逆向播放。

⑧animation属性

是一个简写属性，用于综合设置以上六个动画属性。
基本语法格式：

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

使用animation属性时必须指定animation-name和animation-duration属性，否则持续的时间为0，并且永远不会播放动画。

3、CSS动画的简单实例

①一个简单的文字动画

代码如下：

<style>

    span{

        display: block;

        height: 50px;

        font: bold 14px;

    }

    #d1{

        transform: translate(55px);

        animation: dd1 2s ease-out;

    }

    @keyframes dd1{

        0%{transform: translate(0);opacity: 0;}

        50%{transform: translate(30px);opacity: 1;}

        70%{transform: translate(35px);opacity: 1;}

        100%{transform: translate(60px);opacity: 0;}

    }

   

</style>

<body>

    <div>

        <span id="d1">哈哈哈哈哈哈哈哈哈哈哈哈</span>

        <span id="d2">嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</span>

        <span id="d3">呵呵呵呵呵呵呵呵呵呵呵呵</span>

    </div>

</body>

②一个简单的图形动画

代码如下：

<style>

    @keyframes move1{

        0%{

            left: 100px;

            top: 200px;

        }

        15%{

            left: 150px;

            top: 300px;

            border-radius: 15px;

            background-color: lightskyblue;

        }

        30%{

            left: 400px;

            top: 400px;

            border-radius: 30px;

            background-color: rgb(48, 204, 108);

        }

        45%{

            left: 450px;

            top: 300px;

            border-radius: 50px;

            background-color: rgb(93, 46, 168);

        }

        60%{

            left: 500px;

            top: 200px;

            border-radius: 80px;

            background-color: rgb(215, 235, 128);

        }

        75%{

            left: 450px;

            top: 100px;

            border-radius: 100px;

            background-color: rgb(13, 123, 192);

        }

        90%{

            left: 300px;

            top: 0px;

            border-radius: 0px;

            background-color: rgb(240, 77, 153);

        }

        100%{

            left: 50px;

            top: 100px;

            border-radius: 20px;

            background-color: rgb(250, 196, 135);

        }

    }

    div{

        /* margin: 200px; */

        width: 200px;

        height: 200px;

        position: absolute;

        left: 100px;

        top: 200px;

        border: lightslategrey;

        background-color: lightsalmon;

        border-radius: 100px;

        animation: move1 10s ease-in;

    }

</style>

<body>

    <div></div>

</body>

浏览器效果自行查看。