CSS animation

最新推荐文章于 2024-03-19 19:48:52 发布

Abner_木木

最新推荐文章于 2024-03-19 19:48:52 发布

阅读量54

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43401689/article/details/117451166

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

动画避坑指南：

属性不要混用，如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>

8s的时间到红色
2s的时间回到绿色
在这里插入图片描述

Abner_木木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS animation

<!DOCTYPE html><html><head><style> div { width: 100px; height: 100px; background-color: green; animation-name: example; animation-duration: 10s; animation-iteration-count:4; }@keyframes example { from {backgro
复制链接

扫一扫

专栏目录