十五天学会css之第九天transform animation

东方淼淼
222 阅读2分钟

第九天transform animation

image.png

transform常用的几个值

translate：位移

  • 水平位移：transform : translateX(x轴距离)
  • 垂直位移：transform : translateY(y轴距离)
  • 复合位移：transform : translate（x轴距离 y轴距离）

scale：缩放

  • transform ：scale（X,Y）（X代表的是缩放宽度的X倍 Y代表的是缩放长度的Y倍 ）
  • transform ：scale（n） （代表同时缩放，x，y的n倍）

rotate: 旋转

  • transform：rotateX（45deg）：代表的是围绕x轴旋转45deg；
  • transform：rotateY（45deg）：代表的是围绕y轴旋转45deg;
  • transform：rotateZ（45deg）：代表的是围绕z轴旋转45deg;

skew:倾斜

  • transform：skewX（45deg）：代表的是围绕x轴倾斜45deg；
  • transform：skewY（45deg）：代表的是围绕y轴倾斜45deg；
  • transform：skew（45deg）：代表的是围绕x，y轴倾斜

transform-origin

x,y;改变元素变形时候的作用原点

  • 水平方向：left center right
  • 垂直方向：top center bottom

transform-style

  • flat:默认平面
  • preserve-3d:三维空间 立体

perspective

代表观察者距舞蹈的距离，给父级元素添加这个属性，他的子元素有一个近大远小的效果

过渡动画

transition

  • 动画的属性: transition-property:height；
  • 动画执行的时间: transition-duration: 2s;
  • 动画曲线： transition-timing-function: linear;
  • 延迟: transition-delay: 1s;

简写：transition：height 2s linear 1s；

animation

  • animation-name 指定要绑定到选择器的关键帧的名称
  • animation-duration 动画指定需要多少秒或毫秒完成
  • animation-timing-function 设置动画将如何完成一一个周期
  • animation-delay 设置动画在启动前的延迟间隔。
  • 动画执行的次数: animation-iteration-count ，可以是具体的数字，比如3代表就是执行3次;还可以设置成无限循环infinite;
  • 设置动画的状态: animation-fill-mode ;
  • forwards:当动画结束，停留在最后一帧
  • backwards:在动画中有延迟的时候，设置backwards，会迅速的跑到第一桢开始执行 动画
  • both:当设置的有 延迟的时候，动画迅速以第一桢开始，当动画结束的时候，停留在最后一帧。

简写: animation:name 2s linear infinite;

案例

运动的小方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            width: 600px;
            height: 600px;
            margin:0 auto;
            border: 2px dashed pink;

        }
        .box{
            width: 100px;
            height: 100px;  
            background: yellow;
            animation: box 5s linear infinite;
        }
        @keyframes box{
            0%{
                transform: translate(0px,0);
            }
            25%{
                transform: translate(500px,0);
            }
            50%{
                transform: translate(500px,500px);
            }
            75%{
                transform: translate(0px,500px);
            }
            100%{
                transform: translate(0px,0);
            }
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="box"></div>
    </div> 
</body>
</html>

钟摆案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0 auto;
        }
        .box{
            width: 20px;
            height: 200px;
            border: 2px solid red;
            margin: 0 auto;
            position: relative;
            transform-origin: center top;
            animation:run 3s linear infinite;
        }
        .round{
            width: 100px;
            height: 100px;
            background:yellow ;
            border-radius: 50%;
            position: absolute;
            top: 200px;
            left: -40px;    
        }
        @keyframes run{
            0%{
                transform:rotate(0deg)
            }
            25%{
                transform:rotate(30deg);
                background:pink;
            }
            50%{
                transform:rotate(0deg)
            }
            70%{
                transform:rotate(-30deg);
                background:rebeccapurple;
            }
            100%{
                transform:rotate(0deg)
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="round"></div>
    </div>
</body>
</html>
avatar
文章
阅读
粉丝