css动画效果-animation
目录
一、定义动画
二、复合属性
1.animation语法使用
2.动画拆分写法:
三、逐帧动画
steps语法使用
四、多组动画
animation属性给一个元素添加多个动画效果
本文介绍了使用关键帧动画效果,给网页元素添加动画特效的基础内容,使用animation给网页添加动画效果。
一、定义动画
示例:第一种写法。
@keyframes{
from{}
to{}
}
示例:第二种写法。
@keyframes{
0%{}
20%{}
50%{}
100%{}
}
代码如下:
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动画</title><style>.box {width: 200px;height: 100px;background-color: pink;animation: change 1s;}@keyframes change {0% {width: 200px;}50% {width: 500px;height: 300px;}100% {width: 800px;height: 500px;}}</style>
</head>
<body><div class="box"></div>
</body>
这里对以上代码进行效果展示:
二、复合属性
1.animation语法使用
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态;
提示:取值不分先后顺序
必须赋值项:
- 动画名称和动画时长
- 若出现2个时间:第一个时间为动画时长,第二个时间为延迟时间
2.动画拆分写法:
动画使用方式:
/* linear:匀速 */
animation: change 1s linear;/* steps(4):分步动画 */
animation: change 1s steps(4);/* 2s:延迟时间 */
animation: change 1s 2s;/* infinite:无限循环,数字:表示重复的次数 */
animation: change 1s infinite;
animation: change 1s 3s;/* alternate:反向 */
animation: change 1s infinite alternate;/* backwards默认值,动画停留在开始状态 */
animation: change 1s backwards;/*forwards: 动画停留在结束状态 */
animation: change 1s forwards;
三、逐帧动画
steps语法使用
steps实现逐帧动画的使用。
animation-timing-function 速度曲线 steps(数字):逐帧动画
作用:精灵动画 (搭配精灵图使用)
代码如下(示例):
animation-timing-function: steps(N);
注意:动画速度曲线为steps(N) , N与精灵图小图个数相同
四、多组动画
animation属性给一个元素添加多个动画效果
写法:
animation:
动画1,
动画2,
动画N
;
css动画效果-animation相关推荐
- css鼠标移入线条延中心伸长,css动画效果:鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去,快乐加倍!-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
- 赞!15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- CSS动画效果构成分析
CSS动画特效的基本构成 文章目录 CSS动画特效的基本构成 CSS动画效果 一.动画轨迹,运动路径 1.规定目标样式 属性transfrom: 二.控制运动路径 transition animati ...
- css动画效果制作正方体旋转相册
以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧! 下面没有放入背景建议大家 ...
- html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究 损失最大 css3意义: CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
- css动画效果:鼠标移上去底部线条从中间往四周动画延伸
css动画效果:鼠标移上去底部线条从中间往四周动画延伸 如图: .top-nav a:after {content: ' ';position: absolute;z-index: 2;bottom: ...
- CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
- CSS动画(animation)详解
CSS动画(animation)详解 通过<CSS过渡>一节的学习我们知道,利用 transition 属性可以实现简单的过渡动画,但过渡动画仅能指定开始和结束两个状态,整个过程都是由特定 ...
- 【每日一练】134—一个好玩有趣的CSS 动画效果
今天这个练习是一个用纯CSS实现的动画效果,非常有趣,大家可以看一下它的最终效果: HTML代码: <!doctype html> <html><head>< ...
- CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
最新文章
- Win10系统如何在防火墙里开放端口
- python读写json文件
- activemq - 浅析消息确认模式
- oracle创建函数语句,Oracle 创建函数与存储过程语句积累
- [Jarvis OJ - PWN]——[XMAN]level4
- 万水千山ABP - 弹出对话框禁用回车
- React-Router 源码分析1
- 创建此对象的程序是quation_MathType出现此对象创建于Equation中的问题怎么办
- CSS3实现文字描边的2种方法
- python开发sqlite3完整_python开发_sqlite3_绝对完整
- Java继承、封装、多态
- python字符串转为ascii码_Python转义字符及用法
- CherryTree:一款免费开源的富文本笔记软件
- css内联样式!important
- zabbix如何自定义一个监控项对web网站进行存活监控和报警?
- Joomla 一个实例建站过程
- 编程题总结 链表问题常用解决方法
- Studio 3T 的Query Builder使用
- 很实用的一本书-《微软Office技巧大赛优秀作品--Office技巧1000例》
- matlab减小数据方差,最小方差控制
热门文章
- android开发教程!看懂这些帮你轻松解决就业问题!知乎上转疯了!
- “东方树叶”走红背后,起底农夫山泉的“科研军团”
- mysql informix_INFORMIX数据库函数
- 2017存钱计划(python实现)
- 强弱类型,动态静态语言比较(JAVA,C,C++,Python,Ruby,PHP,Perl)
- 什么击计算机窗口可以打开资源管理器,Win8系统打开资源管理器窗口经常自动重启电脑解决措施...
- 互联网行业定制网站需要多少钱
- 调用微信支付api实现用户扫描二维码支付订单
- 美国人口普查年收入情况分析
- macOS通过单个typeC拓展坞连接多台显示器实现多屏幕拓展(多屏异显)解决typeC拓展坞只能多屏镜像