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 ...
随机推荐
- js查找出现次数最多的字母
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- PowerDesigner连接SqlServer数据库
- percona-toolkit系列之介绍和安装(mysql复制工具)
percona-toolkit使用教程(一) 一.percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统 ...
- BZOJ 2436 Noi嘉年华（优化DP）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2436 题意:有一些活动,起始时间持续时间已知.有两个场地.每个活动最多只能在一个场地举行 ...
- CodeForces 219C Color Stripe
Color Stripe Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submi ...
- 【转载】ADO,OLEDB,ODBC,DAO的区别
原文:ADO,OLEDB,ODBC,DAO的区别 ODBC(Open Database Connectivity,开放数据库互连) 1992年,微软公司开放服务结构(WOSA,Windows Open ...
- 并行parallel和并发concurrent的区别
http://stackoverflow.com/questions/1050222/concurrency-vs-parallelism-what-is-the-difference Concurr ...
- Map Columns From Different Tables and Create Insert and Update Statements in Oracle Forms
This is one of my most needed tool to create Insert and Update statements using select or alias from ...
- servlet&jsp高级：第二部分
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- install Matlab2016b on Ubuntu 14.04
From Download Download the install file from Download MATLAB, Simulink, Stateflow, and Other MathWor ...