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) */

     

posted on 2023-07-17 00:20  码农-编程小子  阅读(14)  评论(0编辑  收藏  举报