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 ...
随机推荐
- 浅谈MySQL索引背后的数据结构及算法(转载)
转自:http://blogread.cn/it/article/4088?f=wb1 摘要 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储 ...
- web简单连接html文件测试
Web工程: 条件: apache-tomcat-6.0.20(文件夹/7.0)=======位于E盘 标题:链接服务器 步骤: 第一步:打开apache-tomcat-6.0.20-bin-star ...
- C# .ToString() 格式化
c# ToString() 格式化字符串 格式化数值:有时,我们可能需要将数值以一定的格式来呈现,就需要对数值进行格式化.我们使用格式字符串指定格式.格式字符串采用以下形式:Axx,其中 A 为格式 ...
- sudo详解
一. sudo的特点 sudo扮演的角色注定了它要在安全方面格外谨慎,否则就会导致非法用户攫取root权限.同时,它还要兼顾易用性,让系统管理员能够更有效,更方便地使用它.sudo设计者的宗旨是:给用 ...
- Struts2框架的运行流程
Struts2的运行流程 1.浏览器发送请求到控制器(如Struts2中的核心控制器StrutsPrepareAndExecuteFilter): 2.控制器调用Action的execute方法: 3 ...
- BZOJ 2756 奇怪的游戏（最大流）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2756 题意:在一个 N*M 的棋盘上玩,每个格子有一个数.每次 选择两个相邻的格子,并使 ...
- placeholder的兼容性探索之路
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- C# 多线程 Invoke BeginInvoke
Invoke在线程中等待Dispatcher调用指定方法,完成后继续下面的操作. BeginInvoke不必等待Dispatcher调用制定方法,直接继续下面的操作. 来自:百度知道 这个在线程中操作 ...
- 【转载】如何系统地自学 Python?
原文:如何系统地自学 Python? 作者:彭猫 本文由 知乎 彭猫 授权发布,版权所有归作者,转载请联系作者! 是否非常想学好 Python,一方面被琐事纠缠,一直没能动手,另一方面,担心学习成本太 ...
- FreeSWITCH的TLS加密
听着很高大上(实际也很实用)的加密机制,在FreeSWITCH里配置支持竟然这么简单! Greate FreeSWITCH and Greate Programmer! ① cd /usr/local ...