动画
2023-09-27 14:22:17 时间
animation: 动画名称 花费的时间 运动的曲线(动画的运动速度)
何时开始(是否有延迟) 播放次数 播放完后是否相反(默认是从正向);
注意第6个参数。默认是永远正向播放。
alternate 是第一次正向播放,第二次反向播放。
alternate-reverse 是第一次反向播放,第二次正向播放
-webkit-animation: move 1.6s linear 0s infinite;是为了兼容谷歌。safira浏览器哈。
通过前缀来兼容哈。
效果:div从left=0的位置,跑到left=400,颜色从pink变成red,动画执行无数次。运动速度匀速:
<style>
.demo {
text-align: center;
line-height: 40px;
width: 100px;
height: 40px;
background: pink;
position: absolute;
left: 0;
/* 定义动画的规制 linear匀速运动*/
animation: move 1.6s linear 0s infinite;
//动画名称move 动画执行的时间是1.6s 匀速(linear) 0s(不延迟) infinite(动画执行无数次)
}
//调用动画
@keyframes move {
from {
left: 0;
background: pink;
}
to {
left: 400px;
background: red;
}
}
</style>
<div class="demo">
我是动画
</div>
相关文章
- 赞!15个来自 CodePen 的酷炫 CSS 动画效果
- 优秀前端教程:实现图片的形状遮罩和动画放大效果
- 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
- 如何用纯 CSS 创作一个均衡器 loader 动画
- unity3d的Animation 动画播放器的基本API
- Spine学习二 -播放Spine动画
- Android 属性动画(Property Animation) 完全解析 (上)
- Android 动画集合,抖音快手点赞动画视频点赞方案
- 手把手带你做一个超炫酷loading成功动画view Android自定义view
- UE4 动画蓝图中两类动画曲线的使用
- JS实现动画之setTimeout、setInterval和requestAnimationFrame
- React Native下拉图片放大动画
- Cocos2d-html5帧动画