CSS transfrom属性与animation属性

一、transform属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
1、移动
基本语法：transform: translate(0px,0px);或者transform: translateX(0px);、transform: translateY(0px);。
transform: translate(0px,0px)：表示第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离；
transform: translateX(0px)、transform: translateY(0px)：分别表示水平方向与垂直方向上移动的距离。
2、缩放
基本语法：transform: scale(1)或者transform: scale(1, 1)、transform: scaleX(1)、transform: scaleY(1)。
transform: scale(1)：表示水平和垂直同时缩放该倍率；
transform: scale(1, 1)：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率；
transform: scaleX(1)、transform: scaleY(1)：分别表示水平方向和垂直方向上的缩放倍率。
3、旋转
基本语法：transform: rotate(90deg)。
rotate()里的值表示要旋转的角度，deg表示单位度。rotate默认是围绕旋转中心旋转。
可以用transform-origin:0px 0px;来改变旋转中心：
列如：

#box{
            width: 200px;
            height: 200px;
            background-color: red;
            transform:rotate(45deg);
            transform-origin:left top;
        }

4、倾斜
基本语法：transform: skew(0deg, 0deg);或者transform: skewX(0deg)、transform: skewY(0deg)
transform: skewX(0deg) 、transform: skewY(0deg) ：分别表示水平方向和垂直方向的倾斜角度；
transform: skew(0deg, 0deg)：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

二、animation属性

animation 属性是一个简写属性，用于设置六个动画属性：

属性                                        描述
animation-name                     规定需要绑定到选择器的 keyframe 名称
animation-duration                 规定完成动画所花费的时间
animation-timing-function       规定动画的速度曲线
animation-delay                      规定在动画开始之前的延迟
animation-direction                 规定是否应该轮流反向播放动画
animation-play-state               规定动画是否正在运行或暂停
animation-iteration-count        规定动画被播放的次数

1、animation-timing-function：规定动画的速度曲线；一些常用的取值

取值	描述
linear	动画从头到尾的速度是相同的
ease	动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始。
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束。

2、animation-iteration-count ：定义动画应该播放多少次。animation-iteration-count: 4表示定义应该播放4次动画； animation-iteration-count: infinite表示指定动画一直播放。
3、animation-direction：定义是否循环交替反向播放动画。

取值	描述
normal	默认值。动画按正常播放
reverse	动画反向播放
alternate	表示动画先正向播放，再反向播放
alternate-reverse	表示动画先反向播放，再正向播放

4、animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

简单的动画制作:

*{
            margin: 0px;
            padding: 0px;
            background-color:rgb(20, 212, 180);
        }
        #box{
            width: 200px;
            height: 200px;
            margin-top: 15%;
            animation: move 4s ease-in-out 2s infinite alternate both;
        }
        @keyframes move{
            0%{
                transform: translate(0px,0px);
                background-color:rgb(204, 36, 72);
                border-radius: 100px;
            }
            50%{
                transform: translate(550px,0px);
                background-color:rgb(204, 36, 72);
                border-radius: 0px;
            }
            100%{
                transform: translate(1120px,0px);
                background-color:rgb(235, 192, 51);
                border-radius: 100px;
            }
        }