标签：iter   页面   现在   ase   百分比   sed   orm   ati   -name   

CSS3 动画

动画的基本使用

• 制作动画分为两不
  • 先定义动画
  • 再使用(调用)动画
• 用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}

• 元素使用动画

div {
    width: 200px;
    height: 200px;
    background-color: red;
    /* 动画名称 */
    animation-name: 动画名称;
    /* 持续时间 */
    animation-duration: 持续时间;
}

• 动画序列
  • 0% 是动画的开始，100% 是动画的完成，这样的规划就是动画序列
  • 再@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变多的样式任意多的次数
  • 请用百分比来规定变化发生的时间，或用关键词 "from"和 "to"，等同于0%和100%
• 现在我们来简单的体验一下
• 我们想页面一打开，一张图片就从左边走到右边

• 上面我们实习的是一次的改变样式的效果
• 当然，动画是可以做多个状态的变化的keyframs 关键帧

@keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(800px, 0);
            }
            50% {
                transform: translate(800px, 300px);
            }
            75% {
                transform: translate(0, 300px);
            }
            100% {
                transform: translate(0, 0);
            }
        }

• 注意
  • 里面的百分比必须要是整数
  • 里面的百分比就是总的时间的划分

动画常用属性

• @keyframes规定动画
• animation所有动画属性的简写属性，除了animation-play-state属性
• animation-name是规定@keyframes动画的名称(必须的)
• animation-duration是规定动画完成一个周期所花费的秒或毫秒(必须的)
  • 默认是 0
• animation-timing-function是规定动画的速度曲线
  • 默认是"ease"动画以低速度开始然后加快，在结束前变慢
  • 值linear匀速
  • 值ease-in动画以低速开始
  • 值ease-out动画以低速结束
  • 值ease-in-out动画以低俗开始和结束
  • 值steps()指定了时间函数中的间隔数量(步长)
    • 就是分几步来完成我们的动画
    • 有了steps就不要在写ease或者linear
• animation-delay是规定动画何时开始的
  • 默认是 0
• animation-iteration-count是规定动画倍播放的次数
  • 默认是1
  • 值infinite无限次
• animation-direction是规定动画是否在下一周期逆向播放
  • 默认是normal
  • 值alternate逆播放
• animation-play-state规定动画是否在正在运行或暂停，可配合事件使用
  • 默认是running
  • 值paused暂停
• animation-fill-mode是规定动画结束后状态
  • 值backwards回到起始
  • 值forwards保持结束位置

动画简写属性

• 前面两个属性name duration一定要写，其它可以省略，不包括animation-play-state属性，顺序如下
• animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态
• animation: name duration timing-function delay iteration-count direction fill-mode;

CSS3 动画

标签：iter   页面   现在   ase   百分比   sed   orm   ati   -name   

原文地址：https://www.cnblogs.com/landuo629/p/12450758.html