css的过渡transition和动画animation
过渡
过渡（transition）是CSS3中具有颠覆性的特性之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时元素添加效果。
过渡动画：是从一个状态渐渐的过渡到另一个状态。低版本浏览器不支持，但是不影响页面布局。经常和:hover一起搭配使用。
| 属性 | 描述 | 取值范围 |
| transition-property | 应用过渡效果的 CSS 属性名 | CSS属性都可以(all, width, color ...) |
| transition-duration | 过渡效果持续时间 | 秒和毫秒都可以, 1s 1000ms ... |
| transition-timing-function | 过渡效果展示方式 | linear(匀速), ease(开始慢、中间快、结束慢，默认可省略) |
| transition-delay | 过渡效果延迟时间 | 秒和毫秒都可以, 1s 1000ms ... |
<style>
div{
width: 200px;
height: 100px;
background-color: pink;
transition: width 1s ease 0s,height 2s ease 1s;
// transition:要过渡的属性 花费的时间 运动曲线 何时开始;
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
}
div:hover{
width:400px;
}
</style>//完整代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡</title>
</head>
<style type="text/css">
div {
float: left;
margin-right: 10px;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: skyblue;
}
/* 鼠标悬停时改变盒子颜色 */
div:hover {
background-color: aqua;
transition: all .8s linear 0s;
}
</style>
<body>
<div></div>
</body>
</html>动画
动画（animation）是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
| animation-fill-mode | 规定对象动画时间之外的状态。 |
/* 动画代码 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 向此元素应用动画效果 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}// 完整代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animation</title>
</head>
<style type="text/css">
div {
float: left;
margin-right: 10px;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: skyblue;
position: absolute;
border-radius: 50%;
}
div {
animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
</style>
<body>
<div></div>
</body>
</html>css的过渡transition和动画animation的更多相关文章
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...
- CSS3的过渡效果(transition)与动画(animation)
1.Transition Transition是一种直观上的效果,让DOM元素的某个属性在固定时间内从一旧值到一新值.目前Firefox.Opera.Safari和Chrome都支持transitio ...
- css3 变形(transform)、转换(transition)和动画(animation)
http://www.w3cplus.com/content/css3-transform/ 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...
- CSS动画 animation与transition
一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...
- CSS 3学习——transition 过渡
以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...
- 深入理解CSS动画animation
× 目录 [1]定义 [2]关键帧 [3]动画属性 [4]多值 [5]API 前面的话 transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的:而animation则是通过关键帧 ...
- 【CSS】过渡、动画和变换
1. 使用过渡 过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. <!DOCTYPE ht ...
随机推荐
- Citus 分布式 PostgreSQL 集群 - SQL Reference(摄取、修改数据 DML)
插入数据 要将数据插入分布式表,您可以使用标准 PostgreSQL INSERT 命令.例如,我们从 Github 存档数据集中随机选择两行. INSERT http://www.postgresq ...
- python3 爬虫 Scrapy库学习1
1生成项目:生成项目文件夹 scrapy startproject 项目名 2生成爬虫文件 scrapy genspider 爬虫名 指定域名 3进入items文件可以输入自己想要爬取的内容比如 te ...
- 使用过 Redis 分布式锁么，它是什么回事？
先拿 setnx 来争抢锁,抢到之后,再用 expire 给锁加一个过期时间防止锁忘记了 释放. 这时候对方会告诉你说你回答得不错,然后接着问如果在 setnx 之后执行 expire 之前进程意外 ...
- maven-something
<!--dependencyManagement提供一种管理依赖版本好的方式--> <!-- 通常出现在项目的最顶层父POM,--> <!-- 可以让所有在子项目中引用的 ...
- String s = new String("xyz");创建了几个String Object?二者之间有什么区别？
两个或一个,"xyz"对应一个对象,这个对象放在字符串常量缓冲区,常量"xyz"不管出现多少遍,都是缓冲区中的那一个.New String每写一遍,就创建一个新 ...
- Effective Java —— 避免创建不必要的对象
本文参考 本篇文章参考自<Effective Java>第三版第六条"Avoid creating unnecessary objects" avoid creatin ...
- SQL数据库之IFNULL函数和NULLIF函数
学习IFNULL()函数 非空判断 解析 IFNULL(expression1, expression2) 如果expression1为null, 在函数返回expression2,否则将返回expr ...
- 无人驾驶—高精地图和V2X
高精地图将厘米级的静态信息传传递给无人车V2X将路况上的动态信息传递给无人车 高精地图的作用 高精地图与传统地图的对比 高精地图与定位的关系 上图左侧是感知到的区域,右侧是高精地图,之后进行拼接获得车 ...
- MOS管驱动电路，看这里就啥都懂了
一.MOS管驱动电路综述在使用MOS管设计开关电源或者马达驱动电路的时候,大部分人都会考虑MOS的导通电阻,最大电压等,最大电流等,也有很多人仅仅考虑这些因素.这样的电路也许是可以工作的,但并不是优秀 ...
- 8 个有用的 HTML5 标签
作为一个 web 前端开发者,在制作页面的时候你会从一大堆不同的标签中选择合适的标签来完成相应的功能.有些 HTML5 标签广为流传,例如 <article> <header> ...