CSS animation

最新推荐文章于 2024-04-22 09:30:00 发布

Abner_木木

最新推荐文章于 2024-04-22 09:30:00 发布

阅读量71

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_43401689/article/details/117451166

版权

CSS 专栏收录该内容

5 篇文章

订阅专栏

动画避坑指南：

属性不要混用，如left :和 transform：translatex
举得例子中margin-left换成left就没法从平滑过渡到。需要为每一帧设置left。
keyframes中如果100%没有设置，那么不是@keyframes中的0%作为100%，而是animation所在的样式为100%。
animation-name:myanimation
animation-duration:3s
animation-timing-function:ease linear ease-in ease-out ease-in-out
animation-delay:5s -2s
animation-iteration-count:5 | infinite
animation-direction:reverse alternate alternate-reverse normal
animation-fill-mode:forwards backwards none both

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: green;
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count:4;
    position:relative;
}

@keyframes example {
  from {background-color: yellow;}
  80% {background-color: red;margin-left:500px;transform:rotate(45deg)}  

}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>

<div></div>

<p><b>注释：</b>当动画结束后，会变回最初的样式。</p>

</body>
</html>