CSS转换，过渡效果和动画

CSS中，有时为了更吸引眼球，可以采用一些动画或拉伸等让元素更具有趣味性

1.转换transform

• translate:平移
  translate(x,y) //x,y轴方向平移
  例

<div class="div">
    <div class="div1"></div>
</div>

<style>
        .div1{
            background-color: red;
            height: 100px;
            width: 100px;
            transform:translate(100px,200px);
    	}

    </style>

结果如下
没有加transform之前：

添加transform之后：

• rotate:旋转
  X/Y/Z轴旋转

.div1{
            background-color: red;
            height: 100px;
            width: 100px;
            margin-top: 100px;
            margin-left: 300px;
            transform:rotateX/Y/Z(50deg);

        }

结果如下
x轴

Y轴

Z轴

• 比例scale
  例

.div1{
            background-color: red;
            height: 100px;
            width: 100px;
            margin-top: 100px;
            margin-left: 300px;
            transform: scale(1.5);

        }

结果如下
添加scale前

添加scale后

2.过渡效果transtion

添加动态效果时，为了能更加好看，清楚，常常会添加过渡效果，例
当鼠标放在下面div上时，让其旋转180度

 .div1{
            background-color: red;
            height: 100px;
            width: 100px;
            margin-top: 100px;
            margin-left: 300px;
            transition: all 1s;
        }
        .div1:hover{
            transform: rotate(180deg);
        }

因为无法放动图，其效果无法体现，图片省略

3.动画

想要实现动画，就要使用@keyframes，在里面写要添加的动画
例

.div1{
            background-color: red;
            height: 100px;
            width: 100px;
            transition: all 1s;
            animation: my 1s;
        }
        @keyframes my {
            from{

            }
            to{
                margin-left: 300px;
                margin-top: 200px;
            }
        }

@keyframes后面是自己定义的动画名称，在需要动画的元素里添加这个动画，以及动画要执行的时间（图省略）
animation里还有以下几个属性：

• animation-name 要执行的动画名称
• animation-duration 要执行多长时间,通常和动画名称写在一起，简写为animation
• animation-delay:延迟多长时间
• animation-direction:动画在下一个是否为逆向播放状态,默认不逆向，如果写成animation-direction:alternate;
• animation-fill-mode:forwards 动画结束停在最后的那个状态，
• animation-iteration-count: 4;播放的次数，如果值为infinite，则无限循环播放