当前位置 : 主页 > 网页制作 > css >

CSS动画

来源:互联网 收集:自由互联 发布时间:2021-06-13
1.申明并使用动画 第一步申明动画 @keyframes myfirst { from {width:200px;height:200px;}to{width:300px;height:300px;}} 或 @keyframes myfirst { 0 % {width:200px;height:200px;} 50 % {width:400px;height:200px;} 100 % {width:400px;h

1.申明并使用动画

第一步申明动画

@keyframes myfirst {

from{
width:200px;
height:200px;
}

to{
width:300px;
height:300px;
}


}

@keyframes myfirst {

0%{
width:200px;
height:200px;
}

50%{
width:400px;
height:200px;
}

100%{
width:400px;
height:400px;
}

}

第二步 使用动画

animation:动画名称 动画时间 延时时间

动画次数(infinite  不限次数)

动画方向(normal :从 from 到to   alternate 从 from 到to   再从to 到from)

动画效果(linear  ease  steps)

(顺序没有要求 延时时间要放到动画时间之后)

animation: myfirst 5s  2s infinite alternate linear;

2.animation动画库的使用

 

(1)引入animation.css

(2)使用动画

方法一:css操作

div{animation: flash 5s infinite}

方法二:添加类名

  • 给指定的元素添加基础class animated
  • 如果需要无限做动画, 添加 infinite 类名即可
比如<div class="animated rotateIn"></div>
网友评论