css3 ,CSS3 动画
CSS3 动画
CSS3 动画
CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
CSS3
动画
CSS3 @keyframes 规则
要创建 CSS3 动画,你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性
@keyframes
43.0
4.0 -webkit-
10.0
16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-
animation
43.0
4.0 -webkit-
10.0
16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-
实例
@keyframesmyfirst{from{background:red;}to{background:yellow;}}@-webkit-keyframesmyfirst/*Safari 与 Chrome*/{from{background:red;}to{background:yellow;}}
CSS3 动画
当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器:
规定动画的名称
规定动画的时长
实例
把 "myfirst" 动画捆绑到 div 元素,时长:5 秒:
div{animation:myfirst5s;
-webkit-animation:myfirst5s;/*Safari 与 Chrome*/}
尝试一下 »
注意:您必须定义动画的名称和动画的持续时间。如果省略的持续时间,动画将无法运行,因为默认值是0。
CSS3动画是什么?
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
实例
当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:
@keyframesmyfirst{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}@-webkit-keyframesmyfirst/*Safari 与 Chrome*/{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}
尝试一下 »
实例
改变背景色和位置:
@keyframesmyfirst{0%{background:red;left:0px;top:0px;}25%{background:yellow;left:200px;top:0px;}50%{background:blue;left:200px;top:200px;}75%{background:green;left:0px;top:200px;}100%{background:red;left:0px;top:0px;}}@-webkit-keyframesmyfirst/*Safari 与 Chrome*/{0%{background:red;left:0px;top:0px;}25%{background:yellow;left:200px;top:0px;}50%{background:blue;left:200px;top:200px;}75%{background:green;left:0px;top:200px;}100%{background:red;left:0px;top:0px;}}
尝试一下 »
CSS3的动画属性
下面的表格列出了 @keyframes 规则和所有动画属性:
属性
描述
CSS
所有动画属性的简写属性。
3
规定 @keyframes 动画的名称。
3
规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3
规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
3
规定动画何时开始。默认是 0。
3
规定动画是否在下一周期逆向地播放。默认是 "normal"。
3
规定动画是否正在运行或暂停。默认是 "running"。
3
下面两个例子设置所有动画属性:
实例
运行myfirst动画,设置所有的属性:
div{animation-name:myfirst;animation-duration:5s;animation-timing-function:linear;animation-delay:2s;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:running;/*Safari 与 Chrome:*/-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;}
尝试一下 »
实例
与上面的动画相同,但是使用了简写的动画 animation 属性:
div{animation:myfirst5slinear2sinfinitealternate;/*Safari 与 Chrome:*/-webkit-animation:myfirst5slinear2sinfinitealternate;}
尝试一下 »
css3 ,CSS3 动画相关推荐
- 8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画 如 ...
- CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...
- html与css结合动效案例,CSS3制作动画效果例子
实现网站的图片.文字的动态效果,我们有photoshop制作多帧动画GIF.用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果.然而,即使 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- CSS3圆圈动画放大缩小循环动画效果
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- css3圆角360度转动画,target,框架集,css3过渡动画,css3圆角-阴影-透明度,运动曲线,图片文字遮罩,变形...
target 模拟后台服务器 框架集 frameset和body不合,所以如果用frameset就不能有body标签 利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显 示不 ...
- 不炫技,SVG+CSS3 旋转动画属性就能实现的梦幻效果
CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移.轨迹.旋转.缩放.斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些 ...
- css3的动画特效--元素旋转(transition,animation)
css3的动画特效--元素旋转(transition,animation) 开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和tra ...
- html鼠标悬停盒子凸起,css3 transform动画鼠标悬停div容器凸起放大显示
特效描述:css3 transform动画 鼠标悬停 div容器 凸起放大显示.鼠标悬停div容器凸起放大显示效果 代码结构 1. HTML代码 what? If you want to sell s ...
- php人物行走,非常震撼的纯CSS3人物行走动画
今天分享给大家的是一个用纯CSS3实现的人物行走动画,在没有使用JavaScript的情况下,用CSS3技术将人物行走的姿态描绘得非常逼真.其实动画实现的原理也是比较简单的,将人物行走时的状态分割成多 ...
最新文章
- 自定义classloader中的接口调用
- Spring Cloud--Honghu Cloud分布式微服务云系统—System系统管理
- linux 系统命令
- QT5.14搭建MSVC(VS2017) x86 以及64位编译器开发环境搭建(GDB配置)
- 数组以及对象遍历方法对比
- 微信小程序项目实战知识点总结(swiper组件自适应高度,自定义弹出层,悬浮按钮,虚拟键盘)...
- 文件字符输入流 java
- Android开发之APN网络切换
- mysql触发器delimiter_MySQL的触发器创建之注意事项(有关delimiter)
- [Usaco2009 Feb]Revamping Trails 堆优化 Dijkstra
- c++ primer plus 对象和类
- HealthKit 的新增功能
- 苹果cms永久免费影视建站程序
- I.MX6Q(TQIMX6Q/TQE9)学习笔记——新版BSP之u-boot移植
- 激光干涉仪测量五轴机床旋转轴精度的方法
- 电脑组装好了开机完全没反应?
- 使用cookie进行模拟登陆
- 用python绘制字符画
- numpy ndarray 与 array
- 根据oe抓取ebayno title fits
热门文章
- 计算思维( Computational Thinking )
- 浏览器的开发者工具使用介绍
- 一个高级java工程师需要具备什么能力和技术
- SA实战 ·《SpringCloud Alibaba实战》第03章-微服务介绍
- 愿你走出半生,归来仍是少年
- Jquery常用的22条命令
- 模板引擎的发展 及 thymeleaf
- SOME/IP协议详解「2.1.1·SOME/IP的格式头」
- notepad++ verilog 主题备份
- 天龙八部怀旧服务器维护,新天龙八部玩家苦寻当年的师傅,8年间玩了十个服务器...