CSS动画示例(上一篇是CSS过渡…)
大家好,欢迎来到雄雄的小课堂,前面,我们将CSS的变形和过渡都整理了,有需要的可以移步这里看:
CSS3中的动画示例
CSS3的几个变形案例……
今天,我们来看看CSS3的动画。
CSS3使用动画分为两个步骤:
1.通过类似flash动画的关键帧来声明一个动画。
2.在animation属性中调用关键帧声明的动画,实现一个更为复杂的动画效果。
接下来我们具体来看看CSS3是如何实现动画的?
01
设置关键帧
在CSS3中,把@keyfreams成为关键帧,这个关键帧可以设置多段属性,其语法为:
@keyfreams name{from{//CSS代码}percentage{//CSS 代码}to{//CSS 代码}}
也可以将from、percentage和to换成百分比,如下:
@keyfreams name{0%{//CSS代码}50%{//CSS 代码}100%{//CSS 代码}
}
语法解析:
name:动画的名称,通过该名称来调用该动画
percentage(50%):是一个百分比,主要用来定义某个时段的动画效果。
下面我们来看一段代码:
Html代码:
<div style="background: darkgoldenrod;" id="div7">
CSS样式代码:
/*声明一个动画*/@keyframes name{0%{width: 200px;height: 200px;background: yellow;}50%{width: 400px;height: 400px;background: green;}75%{width: 500px;background: black;}100%{width:600px ;height: 600px;background: cornflowerblue;}}
02
调用动画
@keyfreams只是用来声明动画效果的,但是如果不调用它的话,它就不会起什么效果,下面我们来看看怎么通过animation来调用动画。
语法:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode
语法好长,下面来解释一下吧。
animation-name:调用的动画名称
animation-duration animation-timing-function animation-delay:分别是过渡时间,过渡方式,延迟时间。
animation-iteration-count:动画的播放次数,可以是整数,如果是infine的话,则是无限循环。
animation-direction:动画播放的方向,normal表示向前播放,alternate表示一前一后(播放次数偶数向前播放,奇数则反方向播放)。
animation-play-state:动画的播放状态,running和paused.
下面我们来看看调用动画的代码:
#div7:hover{animation:name 1s infinite alternate ease-in-out;}
效果如图所示:
往期精彩
CSS3中的动画示例
2020-11-19
CSS3的几个变形案例……
2020-11-18
jsp中使用cookie时报错……
2020-11-17
Java中的TreeSet集合会自动将元素升序排序
2020-11-16
“老师,请您多关注一下我吧!!!”
2020-11-15
晨读,难道只是为了完成任务而读的吗?
2020-11-14
点分享
点点赞
点在看
CSS动画示例(上一篇是CSS过渡…)相关推荐
- CSS 动画学习笔记——Animation篇
首先了解一下 Animation 的基本用法,使用其需要给动画指定一个周期持续的时间,以及动画效果的名称.可以看一下demo 注释:这是一个给透明和背景色属性设置的一个动画过渡效果 实现很简单(具体看 ...
- 【CSS 教程系列第 3 篇】CSS 如何添加注释
这是[CSS 教程系列第 3 篇],如果觉得有用的话,欢迎关注专栏. 语法 /* 这里填写注释内容 */ 说明 CSS 注释是以 "斜杠+星号" 开始,以"星号+斜杠&q ...
- css怎么设置上三角,如何使用css实现三角符号 (附代码)
本篇文章给大家带来的内容是关于如何使用css实现三角符号,代码有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在 ...
- css 跳跃动画,CSS动画实例:跳跃的字符
1.翻转的字符 在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: H E L L O 为container和span定义CSS样式规则,并定义实现 ...
- css动画和js动画比较!
原文地址:http://css-tricks.com/myth-busting-css-animations-vs-javascript/ 译文地址:https://github.com/classi ...
- 在html5中关键帧属性的描述,CSS动画属性关键帧keyframes全解析
大概有多久没有更新专栏文章了.半年?下半年忙到起飞,或者毫不夸张的说是发射?仅有的一点个人时间,上半年贡献给了Python,现在差不多已忘掉了七七八八(一首<凉凉>送给自己),下半年贡献给 ...
- 反向的css动画,动画方向 | animation-direction
动画方向 | animation-direction animation-directionCSS 属性指示动画是否反向播放,它通常在简写属性animation中设定 /* Single animat ...
- Animate.css动画
Animate.css动画 第一步: 将animate.css动画库拷贝到css文件夹,利用link引入 <!-- 引入动画库animate.css --> <link rel=&q ...
- js动画和css动画的差别
代码复杂度方面: 简单动画,css 代码实现会简单一些,js 复杂一些. 复杂动画的话,css 代码就会变得冗长,js实现起来更优. 动画运行时: 对动画的控制程度上,js 比较灵活,能控制动画暂停, ...
最新文章
- adb打开packages_adb shell pm list packages的用法
- UA MATH567 高维统计II 随机向量10 Grothendieck不等式的证明 版本二:kernel trick
- 从今开始,好好学习一下算法!
- 如何使用 Linq 获取每个分组中的第一个元素?
- Codefest 18 (rated, Div. 1 + Div. 2)-D-Valid BFS--思维--已知bfs序,求是否正确
- mysql优化之连接优化
- ad20/ad21/ad22学习笔记(基本包含一套流程)Altium Designer
- 搭建一个属于自己的星球-快速建站实录(1/3):域名
- 微信小程序picker组件添加默认选择(单个picker情况)
- 【计算机网络】物理层 : 编码 ( 数字数据 编码 数字信号 | 非归零编码 | 归零编码 | 反向不归零编码 | 曼彻斯特编码 | 差分曼彻斯特编码 | 4B/5B 编码 )
- 小甲鱼C++ 1 语言与思想介绍
- 菩提千年,你是我红尘中最美的缘
- Mac MySql官方下载速度太慢解决方案
- oracle大对象的存储,(16 ) Oracle数据库可以存储极大的对象,CLOB表示【16】大对象。...
- JavaScript进阶(四)
- 如何使文字和图片垂直居中对齐
- 计算机与科技课题题目,新颖的计算机科学技术专业论文选题 计算机科学技术专业论文题目选什么比较好...
- commander.js使用及源码分析
- 企业信息安全————1、什么是企业信息安全
- 如何从零自学成为前端工程师,怎么学习?怎么选老师?
热门文章
- Power Network POJ - 1459(EK算法模板+详解)
- python通过tkinter界面库实现三角形成立的测试
- linux下I2C驱动发送IO时序,I2C驱动情景分析——怎样控制I2C时序
- 分布式缓存——一致性哈希算法
- Spring bean 初始化顺序
- HDU - 6071 Lazy Running 同余最短路 + 分层
- ARC068C - Snuke Line
- P4570 [BJWC2011]元素
- P5518-[MtOI2019]幽灵乐团【莫比乌斯反演,欧拉反演】
- P2150-[NOI2015]寿司晚宴【dp】