测试代码及说明:

<!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用法的更多相关文章

  1. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  2. 总结CSS3新特性(Animation篇)

    动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法: @keyframes name { 0% { to ...

  3. CSS3 @keyframes 用法(简单动画实现)

    定义: 通过 @keyframes 规则,能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,可以多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或 ...

  4. WPF 自定义窗口关闭按钮

    关闭图标设计主要涉及主要知识点: 1.Path,通过Path来画线.当然一般水平.竖直也是可以用Rectangle/Border之类的替代 一些简单的线条图标用Path来做,还是很方便的. 2.简单的 ...

  5. [转] ReactNative Animated动画详解

    http://web.jobbole.com/84962/     首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 - 首页 所有文章 ...

  6. Vue过渡效果之CSS过渡

    前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

  7. css3动画(@keyframes和animation的用法)

    animation基本用法是: animation: name keeping-time animate-function delay times iteration final; 第一个参数:nam ...

  8. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  9. Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法

    一.概述 Android的animation由四种类型组成:alpha.scale.translate.rotate,对应android官方文档地址:<Animation Resources&g ...

随机推荐

  1. Unix下五种IO模型

    http://blog.chinaunix.net/uid-25324849-id-247813.html 1. I/O模型 Unix下共有五种I/O模型 a. 阻塞I/O b. 非阻塞I/O c. ...

  2. 利用Velocity结合Spring发email

    在spring中发mail是一件容易的事,如果利用Velocity做mail的模板来发送就更得心应手了. 首先,还是简单描述sping中的配置,发mail需要一个mail的engin: <bea ...

  3. Android中直播视频技术探究之---视频直播服务端环境搭建(Nginx+RTMP)

    一.前言 前面介绍了Android中视频直播中的一个重要类ByteBuffer,不了解的同学可以 点击查看 到这里开始,我们开始动手开发了,因为我们后续肯定是需要直播视频功能,然后把视频推流到服务端, ...

  4. 2016年11月2日 星期三 --出埃及记 Exodus 19:18

    2016年11月2日 星期三 --出埃及记 Exodus 19:18 Mount Sinai was covered with smoke, because the LORD descended on ...

  5. JAVA线程池的创建

    /** * 创建不同类型的线程池 Executors * * @author */ public class ThreadPoolTest01 { public static void main(St ...

  6. SqlSever基础 datediff 计算两个时间相差多少年份

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  7. 只用css来美化的上传表单按钮(抄的迅雷的)

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>文件 ...

  8. 【Unity3D游戏开发】基础知识之Tags和Layers (三二)[转]

    Tags和Layers分别表示是Unity引擎里面的标签和层,他们都是用来对GameObject进行标识的属性,Tags常用于单个GameObject,Layers常用于一组的GameObject.添 ...

  9. [翻译]投影变换 Projection Transform (Direct3D 9)

    你可以认为投影变换就是控制摄像机内部的一种方式.他可以类推为为摄像机选择一个漏字板.它是三种变换中最难懂的.本文只讨论以下的一些内容. 典型的投影变换就是缩放和透视投影.投影就变换把视椎转化为一个立方 ...

  10. ubuntu下mysqli_connect()显示未定义,mysqli_fetch_all()显示未定义 解决方法

    mysqli_connect()显示未定义解决方法: http://www.cnblogs.com/misoag/archive/2013/01/24/2874439.html 让apache.php ...