css animation

1. 先来实现一个简单动画效果

<body>
  <div>hello animation</div>
</body>
  <style>
    div {
      animation: 2s myanimation 3 /*steps(5)*/; // 表示动画花费2s执行完，动画名称为myanimation，动画执行3次
      animation-play-state: paused; // 先停止动画，即首次打开网页时不会自动执行动画
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    div:hover {
      animation-play-state: running; // 鼠标悬停在div盒子上才执行动画
    }
    @keyframes myanimation {
      50% {
        width: 200px;
        background-color: gold;
      }
      to {
        width: 100px;
        background-color: skyblue;
      }
    }
  </style>

2. 简单介绍animation 属性用于制作复杂动画效果，简单的可以使用transition，

详细介绍可查看：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

animation 常用属性：
1. animation-name 动画名称 【在@keyframes后使用】
2. animation-duration 动画完成所需时间
3. animation-delay 延迟执行动画
4. animation-timing-function 动画执行状态
5. animation-fill-mode 动画结束后，会立即返回初始状态，若想保持在结束状态，
则使用此属性，属性值为forwards 默认值为none
6. animation-direction 制定了动画的方向，常用属性为normal【默认】和reverse
7. animation-iteration-count 规定动画执行多少次 可食用infinite无限次执行

比较特殊的属性：animation-play-state 指定动画状态，可使用paused停止动画
使用running继续执行动画

posted @ 2021-09-11 16:16  TwinkleG  Views(198)  Comments(0)    收藏  举报