c3中基本动画
2024-09-04 16:21:05
动画:是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果;.
- 必要元素:
a、通过@keyframes指定动画序列;自动补间动画,确定两个点,系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧
b、通过百分比将动画序列分割成多个节点;
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素;
- animation样式常用属性:
a) 动画序列的名称:animation-name: move;
b) 动画的持续时间:animation-duration: 1s;
c) 动画的延时:animation-delay: 1s;
d) 播放状态:animation-play-state: paused|running;
e) 播放速度:animation-timing-function: linear;
f) 播放次数反复:animation-iteration-count: 1;
g) 动画播放完结后的状态:animation-fill-mode: forwards;
h) 循环播放时,交叉动画:animation-direction: alternate;
- 代码说明:<style>
*{
padding: 0;
margin: 0;
}
div{
width: 300px;
height: 300px;
margin:100px auto;
}
div >img{
width:100%;
}
/*添加动画*/
@keyframes rotateAni {
0%{
/*可以同时对多个属性添加动画效果*/
transform: rotate(0deg) scale(1);
}
50%{
transform: rotate(180deg) scale(2);
}
100%{
transform: rotate(360deg) scale(1);
}
}
div:hover >img{
/*动画名称-自定义*/
animation-name: rotateAni;
/*动画时间*/
animation-duration: 1s;
/*动画速率曲线: linear:匀速 ease:动画以低速开始,然后加快,在结束前变慢 ease-in:动画以低速开始 ease-out:动画以低速结束 ease-in-out:动画以低速开始和结束*/
animation-timing-function: linear;
/*动画播放次数*/
animation-iteration-count: 4;
/*动画时间延迟*/
animation-delay: 0s;
/*动画播放完的状态: forwards:保持动画播放完毕后的状态 backwards:退回到原始状态(默认值)*/
animation-fill-mode: forwards;
/*动画是否轮流反射播放: alternate:在规定的次数内轮流反射播放 normal:正常播放*/
/*animation-direction: alternate;*/
}
div:active >img{
/*动画的当前播放状态: paused:暂停 running:运行*/
animation-play-state: paused;
}
</style>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 300px;
height: 300px;
margin:100px auto;
}
div >img{
width:100%;
}
/*添加动画*/
@keyframes rotateAni {
0%{
/*可以同时对多个属性添加动画效果*/
transform: rotate(0deg) scale(1);
}
50%{
transform: rotate(180deg) scale(2);
}
100%{
transform: rotate(360deg) scale(1);
}
}
div:hover >img{
/*动画名称-自定义*/
animation-name: rotateAni;
/*动画时间*/
animation-duration: 1s;
/*动画速率曲线: linear:匀速 ease:动画以低速开始,然后加快,在结束前变慢 ease-in:动画以低速开始 ease-out:动画以低速结束 ease-in-out:动画以低速开始和结束*/
animation-timing-function: linear;
/*动画播放次数*/
animation-iteration-count: 4;
/*动画时间延迟*/
animation-delay: 0s;
/*动画播放完的状态: forwards:保持动画播放完毕后的状态 backwards:退回到原始状态(默认值)*/
animation-fill-mode: forwards;
/*动画是否轮流反射播放: alternate:在规定的次数内轮流反射播放 normal:正常播放*/
/*animation-direction: alternate;*/
}
div:active >img{
/*动画的当前播放状态: paused:暂停 running:运行*/
animation-play-state: paused;
}
</style>
最新文章
- js限制文本框只能输入数字方法小结
- libpng使用
- wpf框架模型分析
- MAT之prim算法
- XAF应用开发教程(一) 创建项目
- Apache ab 测试工具使用(一)
- LeetCode (85): Maximal Rectangle [含84题分析]
- HTML与JS
- Mysql主从备份、主主备份
- 逻辑读为何消耗CPU?
- 关于Java 实现抽象类的抽象方法的特性的利用---面向切面
- 关于visual assist x插件不能用的解决方案
- 【JS】【6】判断一个元素是否在数组中
- MySQL学习笔记-锁相关话题
- Ubuntu 16.04 搭建LAMP服务器环境流程
- AOP编程 - 淘宝京东网络处理
- Ubuntu 18.04下Couldn&#39;t connect to Docker daemon at http+docker://localunixsocket解决办法
- 利用webBrowser获取页面iframe中的内容
- 【Oracle】Oracle约束的总结
- # 2017-2018-1 20155224 加分项-实现mypwd
热门文章
- 【原创】11. MYSQL++ 之 Quoting 与 Escaping
- Lambda02 函数式接口
- 使用Python定时执行一任务,自动登录某web系统,生成报表,然后发送邮件给指定人员
- numpy ndarray 返回 index 问题
- Luogu 3066 [USACO12DEC]逃跑的BarnRunning Away From…
- hadoop2.2分布式环境搭建
- Spring MVC 4.2 增加 CORS 支持
- UIPopoverController 简单用法(全代码)
- 在IE11(Win10)中检查up6.2配置
- vb.net 中 listview 中编辑 可以用 ComboBox 选择编辑数据