css3动画的基本用法之逆战班系列_cssx轴旋转45度-CSDN博客

本文链接：https://blog.csdn.net/Anber_wang/article/details/104441007

首先，我们要想用css3来做一个动画，不可避免的要用到transform和animation这两个属性值。

transform的用法

首先呢，我们的transform的组合一共有5种，分别是：
transform：translate（）；
transform：rotate（）；
transform：scale（）；
transform：skew（）；
transform：matrick；

transform：translate（）

接下来我们说一下transform：translate（）；所代表的意义和用法。
意义：让元素以当前位置向 x 、y轴进行移动。
#box{transform: translate(100px , 100px);}这个代码的意思是让id名为box的元素分别沿着 x 轴和 y 轴移动100px（注意：两个数值之间用逗号隔开）。如图所示：移动前后的对比：
移动后

transform：rotate（）；

然后是rotate，它表示的是让元素进行旋转，里面的数值可以为负，当里面的数值为正数时，表示该元素顺时针旋转；为负数时，该元素以逆时针旋转；单位可以是 deg 表角度（度数），rad 表弧度。例如
：#box{transform: rotate(45deg /* -45deg */ );} 表示的就是 id 为 box 的元素旋转 45° 角。如图：旋转前后对比图

在这里插入图片描述

transform：scale（）；

scale表示缩放，就是在元素的初始大小的基础上面对元素进行放大或缩小。
使用方法：
transform：scale（num）；这个时候里面的数值num表示同时放大或缩小该元素的宽和高。
transform：scale（num1 ， num2）；这个时候 scale 里面有两个数值，其中第一个表示宽的值，第二个表示高的值。例如：
#box{ transform:scale(2 , 3);} 这个代码的意思是把 id 名为 box 的元素宽放大2倍，高放大3倍。如图所示：对比前后
放大前放大后

transform：skew（）；

skew属性表示斜切。transform：skew（num1 ，num2）；其中num1表示x，对 x 方向进行倾斜，意思是元素沿着 y 方向进行倾斜； num2表示y，同理，对 y 方向进行倾斜，元素沿着 x 轴方向进行倾斜；skew的单位是 “deg”；
例如代码：#box{auto; transform:skew(30deg , 30deg);}
将会出现如图所示的前后对比效果效果：
变化前变化后

transform-origin

就是改变被转换元素的基点位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
注：该属性必须与 transform 属性一同使用。

animation的用法

原理：逐帧动画。会把整个运动过程，划分成100份。
animation是在页面加载后就触发；可以设置播放次数可以一直播放，作用于元素本身而不是样式属性，可以使用关键帧的概念，可以实现更自由的动画效果。
animation-name : ；设置动画的名字 (可以随意写)
animation-duration : ；表示动画完成一周期所需要的时间，单位：秒或毫秒
animation-delay : ；表示动画开始前的延迟时间
animation-iteration-count : ；表示动画的重复次数，默认值就是1 ，infinite无限次数
animation-timing-function : ；动画的运动形式，也就是速度曲线
animation-direction : 属性定义是否应该轮流反向播放动画。其中：alternate : 一次正向，一次反向
reverse : 永远都是反向
normal (默认值) : 永远都是正向
animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置
both : backwards和forwards同时生效
关于animation-fill-mode :的css代码如下：

<style>    #box1{ width:100px; height:100px; background:red; margin:10px;        animation: 3s 2s move;/* 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效 */    }    #box2{ width:100px; height:100px; background:red; margin:10px;        animation: 3s 2s move;        animation-fill-mode : backwards; /* 在延迟的情况下，让0%在延迟前生效 */    }    #box3{ width:100px; height:100px; background:red; margin:10px;        animation: 3s 2s move;        animation-fill-mode: forwards;/* 在运动结束的之后，停到结束位置 */    }    #box4{ width:100px; height:100px; background:red; margin:10px;        animation: 3s 2s move;        animation-fill-mode: both;/* backwards和forwards同时生效 */    }
    @keyframes move {        0%{ transform:translate(0,0); background:blue;}        100%{ transform:translate(400px,0)}    } 
    #box{width:100px; height:100px; background:red; margin:10px;        animation: 3s wjt infinite;/* 无限次数 */        animation-direction: alternate;    }    @keyframes wjt {        0%{ transform:translate(0,0);}        100%{ transform:translate(400px,0)}    }    </style>

复合写法：animation：2s 3s wjt linear infinite；
分别表示的是：从左到右:动画完成一个周期所需要的时间；动画开始前的延迟时间；动画的名字；动画的速度曲线；动画完成的次数。

关键帧
@keyframes + 动画的名字{
from{}
to{}
}
其中 from 表示起点位置，等价于0%；to 表示终点位置，等价于 100%；
注：默认情况下，元素运动完毕后，会停留到起点位置。

下面是一个球行在一个物体里面运动的动画。

<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        #main{            width: 600px;            height: 600px;            border: 1px solid black;            position: relative;        }        #main .main-pic{            width: 100px;            height: 100px;            position: absolute;left: 0;top: 0;            animation: 4s -2s wjt linear infinite;            transition: 4s;            border-radius: 50%;            background:linear-gradient(yellow , hotpink)         }        @keyframes wjt{            0%{transform: translate(0 , 0)rotateZ(0deg);}            25%{transform: translate(500px , 0)rotateZ(360deg);}            50%{transform: translate(500px , 500px);}            75%{transform: translate(0 , 500px)rotateZ(360deg);}            100%{transform: translate(0 , 0)rotateZ(360deg);}        }    </style></head><body>    <div id="main">        <div class="main-pic"></div>    </div></body>