css学习--动画

最新推荐文章于 2022-06-19 11:06:14 发布

confiself

最新推荐文章于 2022-06-19 11:06:14 发布

阅读量79

点赞数

分类专栏： js/css

本文链接：https://blog.csdn.net/u012599545/article/details/115920196

版权

js/css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

属性	描述
@keyframes	规定动画模式。 `@keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} }` from相当于0%，to相当于100%
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。 normal - 动画正常播放（向前）。默认值 reverse - 动画以反方向播放（向后） alternate - 动画先向前播放，然后向后 alternate-reverse - 动画先向后播放，然后向前
animation-duration	规定动画完成一个周期应花费的时间。 ns/-ns，允许为负数
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。 none(默认)/forwards/backwards/both
animation-iteration-count	规定动画应播放的次数。 infinite/n，允许为负数
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。 paused/running `animation-play-state:paused; -webkit-animation-play-state:paused; /* Safari 和 Chrome /` @-webkit-keyframes mymove / Safari and Chrome */ { from {left:0px;} to {left:200px;} } 带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本兼容性需要添加一些前缀，需要注意测试
animation-timing-function	规定动画的速度曲线。 ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认） linear - 规定从开始到结束的速度相同的动画 ease-in - 规定慢速开始的动画 ease-out - 规定慢速结束的动画 ease-in-out - 指定开始和结束较慢的动画 cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

简写：

animation：name dur3s linear delay2s infinite alternate

参考地址：https://www.w3school.com.cn/css/css3_animations.asp

示例：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}
div:hover{
animation: example1 3s backwards ;
}

@keyframes example {
  from {top: 200px;}
  to {top: 0px; background-color: blue;}
}
@keyframes example1 {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<p>动画结束后，让 div 元素保留最后一个关键帧的样式值：</p>

<div></div>

<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。</p>

</body>
</html>

translation 动画

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay

默认值all 0 ease 0，不继承

confiself

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习--动画

属性描述 @keyframes 规定动画模式。 @keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; l
复制链接

扫一扫

专栏目录