@keyframes设置 transform属性,animation引用

 各单位注意:

CSS 中仅有 background-color, background-position, 和 background-size 属性支持动画效果

对于transform在css中的应用:

@keyframes slide {
from{transform: translateX(0)}
20%{transform: translateX(0)}
25%{transform: translateX(-1200px)}
45%{transform: translateX(-1200px)}
50%{transform: translateX(-2400px)}
70%{transform: translateX(-2400px)}
75%{transform: translateX(-3600px)}
95%{transform: translateX(-3600px)}
100%{transform:translateX(-4800px)}
}
此代码是css中对于图片轮播图的形式设置
@keyframes使HTML中盒子移动
transform属性

transform:tranlate(100px 10px)盒子向右100px 向下10px

transform:rotate(45deg)使盒子在原位置旋转45度

transform:scale(2)使盒子放大二倍{外边距也会变}

animation引用:

在所要引用的css标签内加入animat:名字 秒数 linear infinite

 

 



posted @ 2021-11-23 13:52  又等花开风起  阅读(369)  评论(0)    收藏  举报