过渡

过渡(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的更多相关文章

  1. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  2. css3中的变形(transform)、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  3. CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

    刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...

  4. CSS3的过渡效果(transition)与动画(animation)

    1.Transition Transition是一种直观上的效果,让DOM元素的某个属性在固定时间内从一旧值到一新值.目前Firefox.Opera.Safari和Chrome都支持transitio ...

  5. css3 变形(transform)、转换(transition)和动画(animation)

    http://www.w3cplus.com/content/css3-transform/  在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...

  6. CSS动画 animation与transition

    一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...

  7. CSS 3学习——transition 过渡

    以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...

  8. 深入理解CSS动画animation

    × 目录 [1]定义 [2]关键帧 [3]动画属性 [4]多值 [5]API 前面的话 transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的:而animation则是通过关键帧 ...

  9. 【CSS】过渡、动画和变换

    1. 使用过渡 过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. <!DOCTYPE ht ...

随机推荐

  1. synchronized和Lock的区别是什么?

    原创2020-11-19 11:38:29011024区别:1.lock是一个接口,而synchronized是java的一个关键字.2.synchronized在发生异常时会自动释放占有的锁 ...

  2. Java使用多线程异步执行批量更新操作

    import com.google.common.collect.Lists; import org.apache.commons.collections.CollectionUtils; impor ...

  3. 使用 Spring 通过什么方式访问 Hibernate?

    在 Spring 中有两种方式访问 Hibernate:控制反转 Hibernate Template 和 Callback.继承 HibernateDAOSupport 提供一个 AOP 拦截器.

  4. ModelSerializer序列化器实战

    目录 ModelSerializer序列化器实战 单表操作 序列化器类 视图类 路由 模型 多表操作 models.py serializer.py views.py urls.py ModelSer ...

  5. Linux套接子(c语言)模拟http请求、应答

    有关套接子和http请求报文的博客在CSDN有很多比如,点这里查看,这里我就不再做过多赘述了,下面我们直接实战,模拟http请求. 要求:浏览器访问本地的localhost,在浏览器页面打印出 Hel ...

  6. 【二次元的CSS】—— 用 DIV + CSS3 画大白(详解步骤)

    原本自己也想画大白,正巧看到一位同学(github:https://github.com/shiyiwang)也用相同的方法画了. 且细节相当到位.所以我就fork了一下,在此我也分享一下.同时,我也 ...

  7. java中instanceof是怎么用的, 干什么使的,举例!

    instanceof关键字 instanceof是java中固有的关键字, 就像main, public一样,用法:aa instanceof AA 就是问aa是不是AA的一个实例, 是的话,就返回真 ...

  8. java中 什么叫隐藏(Hide)? 最好给个例子

    4.隐藏   技术核心和实例前面已经给出,这里只是给出大家对这种现象的一个定义而已,马克-to-win:子类重新定义一个与父类那里继承来的域变量完全相同的变量,称为域的隐藏.这里所谓隐藏是指子类拥有了 ...

  9. Configuration类的理解

    Configuration类主要用来读取配置文件,启动Hibernate,并负责Hibernate的配置信息.一个应用程序只创建一个Configuration. 在Hibernate启动过程中,Con ...

  10. 利用window对象自带atob和btoa方法进行base64的编码和解码

    项目中一般需要将表单中的数据进行编码之后再进行传输到服务器,这个时候就需要base64编码 现在可以使用window自带的方法window.atob() 和  window.btoa()  方法进行 ...