过渡

过渡（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. 企业应用架构研究系列十九：Docker开发环境

    软件行业流行这样一个说法,由于Docker 技术的成熟和该技术被广大厂商的普遍应用,成就了微服务领域的快速成长,衍生了云原生技术和公有云的进一步推广.我个人认为Dockers 技术.微服务技术.云原生 ...

  2. Spring Data Jpa 更新操作

    第一步,通过Repository对象把实体根据ID查询出来 第二部,往查出来的实体对象进行set各个字段 第三步,通过Repository接口的save方法进行保存 保存和更新方式(已知两种) 第一种 ...

  3. 解决Idea.exe无法启动问题(idea2017.3版本)

    问题: 最近在用idea时,突然弹出了以下消息框(图片不是我的): 将Xmx的值调大以后,idea还是闪退了.并且再点击idea.exe时,idea已经木有反映了,无法启动. 解决方案: 方案一(失败 ...

  4. 为什么Java中不支持多重继承？

    我发现这个 Java 核心问题很难回答,因为你的答案可能不会让面试官满意,在大多数情况下,面试官正在寻找答案中的关键点,如果你提到这些关键点,面试官会很高兴.在 Java 中回答这种棘手问题的关键是准 ...

  5. 你了解过Servlet3.0吗？

    Servlet3.0相对于Servlet2.0来说最大的改变是引入了Annotation标注来取代xml配置,用于简化web应用的开发和部署.最主要几项特性: 1. 新增的注解支持:该版本新增了若干注 ...

  6. python 列表,字典,元组,字符串,QuerySet之间的相互转换

    1. 列表转换成字典list1 = ['key1','key2','key3']list2 = ['value1','value2'] dict1 = zip(list1,list2) # dict( ...

  7. Mysql的索引及优化

    一:四种存储引擎: mysql使用 show engines查询其存储引擎: 功  能 MYISAM Memory InnoDB Archive 存储限制 256TB RAM 64TB None 支持 ...

  8. 为什么线程通信的方法 wait(), notify()和 notifyAll()被定 义在 Object 类里？

    Java 的每个对象中都有一个锁(monitor,也可以成为监视器) 并且 wait(),notify() 等方法用于等待对象的锁或者通知其他线程对象的监视器可用.在 Java 的线程中 并没有可供任 ...

  9. Mybatis 开发 dao 的方法

    1.分析SqlSession使用范围 1.1.SqlSessionFactoryBuilder 通过 SqlSessionFactoryBuilder 创建会话工厂 SqlSessionFactory ...

  10. Tcp三次握手四次挥手个人学习

    最近想跳槽,学习了tcp中的三次握手与四次挥手,特意记录下,加深记忆 SYN 代表请求创建连接 FIN 表示请求关闭连接 ACK 代表确认接受,不管是三次握手还是四次分手,在回应的时候都会加上ACK= ...