使用哪个 CSS 属性来设置动画的速度曲线?

ID:13370 / 打印

使用哪个 css 属性来设置动画的速度曲线?

使用animation-timing-function来设置动画的速度曲线。您可以尝试运行以下代码来设置ease和ease-in动画效果:

示例

Live Demo

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 150px;             height: 200px;             position: relative;             background-color: yellow;             animation-name: myanim;             animation-duration: 2s;             animation-direction: alternate-reverse;             animation-iteration-count: 3;          }          @keyframes myanim {             from {left: 100px;}             to {left: 200px;}          }          #demo1 {animation-timing-function: ease;}          #demo2 {animation-timing-function: ease-in;}       </style>    </head>    <body>       <div id = "demo1">ease effect</div>       <div id = "demo2">ease-in effect</div>    </body> </html>
上一篇: 如何将块元素居中对齐?
下一篇: 使用 CSS 使颜色深度变平

作者:admin @ 24资源网   2024-10-18

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。