css动画效果之animation的常用样式
程序员文章站
2022-07-09 10:34:50
animation动画定义一个动画:/*设置一个关键帧,定义动画每一步执行的动作*/@keyframes mybox{ 0%{transform: translate(0,0);...
animation动画
定义一个动画:
/*设置一个关键帧,定义动画每一步执行的动作*/ @keyframes mybox{ 0%{transform: translate(0,0);} 25%{transform: translate(200px,0);} 50%{transform: translate(200px,200px);} 75%{transform: translate(0,200px);} 100%{transform: translate(0,0);} }
/*引用关键帧,设置动画的执行样式*/ animation: mybox 5s 1s infinite;
注:
1、动画结束后回到初始位置。
2、from->0% to ->100%
animation-name: 动画的名字,(必须存在)
animation-duration: 动画持续的时间
animation-delay:规定多长时间后出现动画效果
animation-iteration-count: 定义动画执行的次数
默认值是:1; 无限次数:infinite
animation-timing-function: 定义动画的效果animation-fill-mode:
none:默认值; 样式在延迟之后生效;
backwards: 样式在延迟之前生效;
forwards: 在动画结束之后,停在终点位置;
both: 具备backwards和forwards的特性;
总结
到此这篇关于css动画效果之animation的常用样式的文章就介绍到这了,更多相关css animation的常用样式内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
推荐阅读
-
微信小程序开发之animation循环动画实现的让云朵飘效果
-
css动画效果之animation的常用样式
-
基于CSS3特效之动画:animation的应用
-
css动画:animation的常用样式
-
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
-
CSS常用样式之绘制双箭头的示例代码
-
用C3中的animation和transform写的一个模仿加载的时动画效果_html/css_WEB-ITnose
-
微信小程序开发之animation循环动画实现的让云朵飘效果
-
CSS常用样式(四)之animation
-
css3 | 中的animation/@keyframes xz动画效果-如何使用纯css实现动画效果? 用法:animation:xz 3s 2 4s alternate; 参数:animati