欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3:2D动画

程序员文章站 2024-01-24 15:32:28
...

通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

动画的基本使用

  1. 先定义动画
    CSS3:2D动画
    举例:
@keyframes move {//此时move为动画名称
            0%{//百分之0,表示刚开始的状态
                transform: translateX(0px);
            }
            100%{//100%表示结束时的状态
                transform: translateX(1000px);
            }
      }

而如果我们要让盒子绕一个顺时针走动动画,则可以添加状态变化关键帧:
CSS3:2D动画
2. 调用动画:

div{
            width: 200px;
            height: 200px;
            animation: move 2s infinite;//调用动画名称move,持续时间为2s
}

CSS3:2D动画

  • animation-delay:规定动画何时开始,默认是0
    注意简写模式中:delay的秒数放在持续时间后面!
  • animation-direction:规定一个周期结束时是回到起点还是原路返回(逆向播放)
  • animation-fill-mode:规定动画结束后还是否回来,forwards停留在最后的那个位置。backwards回到起始位置
  • animation-play-state:规定动画运行还是暂停,常用在用鼠标悬浮让其停止运动(简写方式里不支持animation-play-state
div:hover{
            animation-play-state: paused;//鼠标悬浮让其停止运动
}
相关标签: CSS