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 ...
随机推荐
- Windows上Python3.5安装Scrapy(lxml) 以及与twisted有关错误的解决
转载于:http://www.cnblogs.com/silverbullet11/p/4966608.html 常用网址: Python 3.5: https://www.python.org/do ...
- Linux下缓冲区溢出攻击的原理及对策（转载）
前言 从逻辑上讲进程的堆栈是由多个堆栈帧构成的,其中每个堆栈帧都对应一个函数调用.当函数调用发生时,新的堆栈帧被压入堆栈:当函数返回时,相应的堆栈帧从堆栈中弹出.尽管堆栈帧结构的引入为在高级语言中实现 ...
- 搭建spring+mybatis+struts2环境的配置文件
1.web.xml配置 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=& ...
- MySQL日期时间函数大全
DAYOFWEEK(date) 返回日期date是星期几(=星期六,ODBC标准) mysql> select DAYOFWEEK('1998-02-03'); WEEKDAY(date) 返回 ...
- linux下查看电脑配置
1. 查看cpu ~$ cat /proc/cpuinfo 2. 查看内存占用 ~$ cat /proc/meminfo 3. 硬盘分区 $ cat /proc/partitions 4. ubunt ...
- flask安装
Flask简介 Flask算是小型框架,自开发伊始就被设计为可扩展的框架,它具有一个包含基本服务的强健核心.Flask有两个依赖:路由.调试.和web服务器网关接口(Web Server Gatewa ...
- PHP中的XML解析的5种方法
[前言]不管是桌面软件开发,还是WEB应用,XML无处不在!然而在平时的工作中,仅仅是使用一些已经封装好的类对XML对于处理,包括生成,解析等.假期有空,于是将PHP中的几种XML解析方法总结如下: ...
- spring事务之——spring配置事务的五种方式
Spring配置文件中关于事务配置总是由三个部分组成,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSo ...
- Linux运维命令之一
释放内存:syncecho 3 > /proc/sys/vm/drop_caches Linux查看Dell服务器型号命令:dmidecode | grep "Product Name ...
- C#（数据类型）
刚开始学c#!!!