css 过渡动画,使用css3过渡效果

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