Animation用法
测试代码及说明：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Simple CSS3 Animation</title>
<style type="text/css">
#demo {
position: absolute;
left: 30%;
top: 30%;
background-color: red;
width: 200px;
height: 200px;
-webkit-animation: animation1 2s linear forwards; /*只有Webkit内核的浏览器才能解析*/
-moz-animation: animation1 2s linear forwards; /*Firefox浏览器私有属性*/
-o-animation: animation1 2s linear forwards; /*Opera浏览器私有属性*/
-ms-animation: animation1 2s linear forwards; /*IE浏览器私有属性*/
animation: animation1 2s linear forwards; /*Firefox浏览器私有属性*/
} @-webkit-keyframes animation1 {
0% {
background: red;
} 50% {
background: blue;
} 100% {
background: yellow;
}
} @-moz-keyframes animation1 {
0% {
background: red;
} 50% {
background: blue;
} 100% {
background: yellow;
} } @-o-keyframes animation1 {
0% {
background: red;
} 50% {
background: blue;
} 100% {
background: yellow;
} } @-ms-keyframes animation1 {
0% {
background: red;
} 50% {
background: blue;
} 100% {
background: yellow;
}
} @keyframes animation1 {
0% {
background: red;
} 50% {
background: blue;
} 100% {
background: yellow;
} }
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>
演示效果：
Animation用法的更多相关文章
- 前端CSS3动画animation用法
前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...
- 总结CSS3新特性(Animation篇)
动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法: @keyframes name { 0% { to ...
- CSS3 @keyframes 用法（简单动画实现）
定义: 通过 @keyframes 规则,能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,可以多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或 ...
- WPF 自定义窗口关闭按钮
关闭图标设计主要涉及主要知识点: 1.Path,通过Path来画线.当然一般水平.竖直也是可以用Rectangle/Border之类的替代 一些简单的线条图标用Path来做,还是很方便的. 2.简单的 ...
- [转] ReactNative Animated动画详解
http://web.jobbole.com/84962/ 首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 - 首页 所有文章 ...
- Vue过渡效果之CSS过渡
前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...
- css3动画（@keyframes和animation的用法）
animation基本用法是: animation: name keeping-time animate-function delay times iteration final; 第一个参数:nam ...
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
- Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性及用法
一.概述 Android的animation由四种类型组成:alpha.scale.translate.rotate,对应android官方文档地址:<Animation Resources&g ...
随机推荐
- Python学习笔记-Day3-set集合操作
set集合,是一个无序且不重复的元素集合.定义方式类似字典使用{}创建 目前我们学过的数据类型: 1.字符串(str),2.整型(int),3.浮点型(float),4,列表(list) 5.元组(t ...
- 用户 NT AUTHORITY\NETWORK SERVICE 登录失败
Windows server 2003,2008 Web.Config 配置连接sql 使用 win身份验证时: 当连接sql server使用信任连接(参看Web.Config文件)时就会出这个错误 ...
- acdream Divide Sum
Divide Sum Time Limit: 2000/1000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) SubmitSta ...
- libevent系列之一——libevent介绍
摘自:http://libevent.org/ libevent概述:一套事件通知库. libevent提供一套机制完成以下功能:当指定的事件发生在file descriptor时或者超时后执行一个回 ...
- android 源码目录介绍
Android 4.0源码目录介绍|-- Makefile|-- bionic (bionic C库)|-- bootable (启动引导相关代码)|-- build (存放系统编译规则及gener ...
- 【转载】Linux的进程间通信-信号量
原文:Linux的进程间通信-信号量 Linux的进程间通信-信号量 版权声明: 本文章内容在非商业使用前提下可无需授权任意转载.发布. 转载.发布请务必注明作者和其微博.微信公众号地址,以便读者询问 ...
- 当插入数据失败时,防止mysql自增长字段的自增长的方法
问题描述: 当mysql设置了自增长字段时(注意:一个表中只能设置一个自增长字段,可以不是主键,但必须是键 ),如果插入数据失败,那么自增长字段仍然会占用这个自增长值,再次成功插入数据时就会造成断层. ...
- [SAP ABAP开发技术总结]字符串处理函数、正则表达式
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- SQL Server 小技巧【2】
--1.不要使用×来查询所有字段 SELECT * FROM DBO.tb1 --改为 SELECT FName,PWD,CreateDate FROM DBO.tb1 (NOLOCK) --2.查询 ...
- CUBRID学习笔记17 事务的回滚
语法:ROLLBACK [ WORK ] 下面的语句会报错 ALTER TABLE code DROP s_name; INSERT INTO code (s_name, f_name) VALUES ...