526互联

认识css动画相关属性animation

发布时间 2023-07-17 00:23:11作者: 码农-编程小子
transtion属性 需要触发条件，比如hover
animation属性 可以立即执行
transform属性 不是动画，但是对动画起到至关重要的作用
 
  1. 过渡属性transtion  
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 200px;
        height: 200px;
        /* background-image: linear-gradient(green, #fff, red, black, blue); */
        background-color: blue;

        border: 1px solid yellow;
        /* 过渡属性 */

        /* property name | duration | timing function | delay */
        transition: all 10s linear 0s;

        /*过度属性*/
        /* transition-property: background-color; */
        /*过度时间*/
        /* transition-duration: 1s; */
        /*过度函数*/
        /* transition-timing-function: linear; */
        /* 延迟时间 */
        /* transition-delay: 1s; */


    }

    div:hover {
        background-color: blueviolet;
        transform: translateX(20px) scale(2);
    }
</style>

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

</html>

     


  2. animation属性
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /*
transtion 需要触发条件，比如hover
animation 可以立即执行
transform 不是动画


*/


    div {
        width: 200px;
        background: red;
        height: 200px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count */

        /*         
        ease
        表示动画在中间加速，在结束时减速 

        ease-in
        等同于 cubic-bezier(0.42, 0, 1.0, 1.0)，表示动画一开始较慢，随着动画属性的变化逐渐加速，直至完成。

        ease-out
        等同于 cubic-bezier(0, 0, 0.58, 1.0)，表示动画一开始较快，随着动画的进行逐渐减速。

        ease-in-out
        等同于 cubic-bezier(0.42, 0, 0.58, 1.0)，表示动画属性一开始缓慢变化，随后加速变化，最后再次减速变化。
        
        */
        /* animation: my1 10s ease infinite */
    }

    div:nth-child(1) {
        animation: my1 10s ease infinite
    }

    div:nth-child(2) {
        animation: my1 10s ease-in infinite
    }

    div:nth-child(3) {
        animation: my1 10s ease-out infinite
    }

    div:nth-child(4) {
        animation: my1 10s ease-in-out infinite
    }

    @keyframes my1 {
        0% {
            margin-left: 0px;
        }

        100% {
            margin-left: 75%;
        }
    }
</style>

<body>
    <div>ease</div>
    <div>ease-in </div>
    <div>ease-out</div>
    <div>ease-in-out</div>
</body>

</html>

     

  3. transform 属性
     /* 转换属性 */
        /* transform2D 属性允许你旋转，缩放，倾斜或平移给定元素 */
        transform3D多了一个Z轴
        /* 变换函数
        <transform-function>
            旋转，rotate()
                transform-origin: 0 0; 
                transform-origin: top right;
                transform: rotate(20deg);
                transform-origin: 0 0;
            缩放，scale()
                scale(sx, sy)
                ransform: scale(4,2);
                等同于 scaleX(2) scaleY(0.5)
                transform: scale(2, 0.5);
            倾斜:skew()
                Equal to skewX(10deg)
                transform: skew(10deg); 
                transform: skew(10deg, 0deg);
            平移:translate()
                 translateX(20px)
                translateX(20px 30px) */