CSS3之animation动画

程序员文章站 2022-03-09 20:09:26

...

CSS3之animation动画

animation-name属性

作用：定义动画的名字
ps：光有动画名称不能是动画动起来
与@keyframes动画关键帧合用
语法：
animation-name {动画名称}；
@keyframes 动画名称{
from {开始动画}
to{结束动画}
}

animation-duration 属性

作用：过渡持续的时间
语法：animation-duration：time
注：动画需要有duration持续时间属性才能运动起来
直接在设置的元素下添加即可，keyframes里面只用添加动画内容

animation-time-function

作用：动画过渡的方式

linear 匀速运动
ease 平滑过渡（默认），逐渐加快，快到一定速度变慢
ease-in 由快到慢
ease-out 由慢到快
ease-in-out 由慢到快再到慢（最人性化）
step-start 等同于step（1，star）以开始的形态
step-end 等同于star（1，end）
step（参数一：正整数，参数二：star/end）

后三个不常用，了解即可

animation之delay延迟属性

作用：在动画执行前的延迟，单位为秒/毫秒（属于动画之外的时间）
注：若delay为负值，则直接进入动画，且跳过该值的执行过程时间

用这些属性实现一个飞入效果：

<style>
 div{
  font-size: 60px;
  line-height: 600px;
  position:absolute;
  font-weight: bold;
  top: -1000px;
  //让元素在看不到的地方
  left: 0;
  right: 0;
  margin:auto;
  text-align: center;
  border:5px solid #000;
  border-radius:50%;
  width:800px;
  height: 600px;
  animation-name:animation-text;
  //设定动画名
  animation-delay:1s;
  //动画执行前的停顿
  animation-duration:2s;
  //动画执行过程为两秒
 }
 @keyframes animation-text{
  from{transform:translate(0,0px);}
  //动画的起始位置，相对于元素执行前的左上角位置而言
  to{transform:translate(0,1800px);}
  //动画执行后的目标位置，实现飞入效果
 }
 </style>
<body>
 <div>hello!welcome</div>
</body>

animation-iteration-count 循环次数属性

注：在动画开始循环时，会直接忽略delay值，所以可见delay只是动画执行之外的值
参数：infinite（无限次）/ number （循环的次数）

animation-direction 方向属性

参数：

normal正常方向
reverse反方向
alternate ：先正常方向再反方向运行，并持续交替（在循环作用下才有用）
alternate-reverse ：先反方向再正方向运行，持续交替（在循环作用下才有用）

animation-fill-mode 动画不执行时的状态

参数：

none 默认值，不设置
forward 动画结束时的状态
backwards 设置对象为动画执行开始的状态
both 值在开始前和结束后两个状态

animation-play-state 暂停或运行的状态

参数：

paused 暂停
running 运行

animation的简写顺序：
animation：name duration timing-function delay iteration-count direction fill-mode play-state
注：animation会先执行name 和 duration 故首个数值时间会被认定为duration （顺序无需太严谨）

上一篇： Jquery chosen动态设置值实例介绍_jquery

下一篇： jQuery实现点击显示内容下拉效果

CSS3之animation动画