首页 > 其他分享> 文章详细

animation的用法

2021-11-21 22:32:44 阅读：149 来源： 互联网

标签：动画 100% 100px 用法 animation background 0px ease

1.animation要通过 @keyframes 规则

keyframes-selector是动画时长的百分比【0-100% from（与 0% 相同） to（与 100% 相同）】

例如：

@keyframes name{0% {top:0px; left:0px; background:red;}

25% {top:0px; left:100px; background:blue;}

50% {top:100px; left:100px; background:yellow;}

75% {top:100px; left:0px; background:green;}

100% {top:0px; left:0px; background:red;}}

2.animation-timing-function就是规定动画的速度曲线。默认是 “ease”。

linear 动画从头到尾的速度是相同ease 默认。动画以低速开始，然后加快，在结束前变慢

ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值

代码如下

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         @keyframes move {
11           /*Y轴移动*/
12             /*0%{transform: translateY(0)}   !*0%可以替换为from*!*/
13             /*50%{transform: translateY(500px)}*/
14             /*100%{transform: translateY(0px)}   !*100%可以替换为to*!*/
15 
16 
17             /*旋转360°*/
18             0%{transform: rotate(0)}
19             100%{transform: rotate(360deg)}    /*如果不是起始位置和终止位置就会出现卡顿*/
20         }
21         #div1{
22             width: 300px;
23             height: 300px;
24             margin: 100px auto 0;
25             background: lightcoral;
26             animation:move 1s linear 5s infinite}   /*move 2s动画时间为2s，linear 5s为延时5s开始动，执行次数,其中infinite为无限运动下去可改为数字*/
27     </style>
28 </head>
29 <body>
30 <div id="div1"></div>
31 </body>
32 </html>

标签：动画,100%,100px,用法,animation,background,0px,ease
来源： https://www.cnblogs.com/zjz-527/p/15586316.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

animation的用法

1.animation要通过 @keyframes 规则

2.animation-timing-function就是规定动画的速度曲线。默认是 “ease”。