过渡

过渡（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. JSP内置对象（4个作用域）

    9个内置对象: 4个作用域:表示这4个对象可以存值,但取值范围有限定(setAttribute/getAttribute) pageContext request session applicatio ...

  2. 如何规划一台 Linux 主机，步骤是怎样？

    1.确定机器是做什么用的,比如是做 WEB .DB.还是游戏服务器.不同的用途,机器的配置会有所不同.    2.确定好之后,就要定系统需要怎么安装,默认安装哪些系统.分区怎么做.    3.需要优化 ...

  3. Oracle Yum源

    仓库地址(非Yum源仓库):https://public-yum.oracle.com/repo/OracleLinux/OL7/latest/x86_64/index.html 如何连接到 Orac ...

  4. jQuery--筛选【串联函数】

    串联函数简介 A.add(B) 将A和B组合成一个对象 A.children().andSelf() 将之前的对象添加到操作集合中 A.children().children().end() 回到最近 ...

  5. 学习Walle（一）

    一.概述 Walle 一个web部署系统工具,配置简单.功能完善.界面流畅.开箱即用!支持git.svn版本管理,支持各种web代码发布,PHP,Python,JAVA等代码的发布.回滚,可以通过we ...

  6. Python - numpy.clip()函数

    np.clip( a, a_min, a_max, out=None): 部分参数解释: 该函数的作用是将数组a中的所有数限定到范围a_min和a_max中.a:输入矩阵:a_min:被限定的最小值, ...

  7. Python中查看变量的类型，内存地址，所占字节的大小

    查看变量的类型 #利用内置type()函数 >>> nfc=["Packers","49"] >>> afc=[" ...

  8. 推荐一款强大的轻量级模块化WEB前端快速开发框架--UIkit

    前言 今天给大家分享一款强大的轻量级模块化WEB前端快速开发框架--UIkit 到目前(2016-06-20)为止,UIkit在github上的Forks已达到了1350个,而Stars更是达到了69 ...

  9. 小程序wx.getRecorderManager()录音管理

    小程序中提供了两种录音的API,wx.startRecord和wx.getRecorderManager(),前一个现在微信团队已经不再维护,所以在这里写一下新的录音管理,比之前要强大 1.小程序录音 ...

  10. 【uniapp 开发】uni-app 技术点的链接记录

    优雅的H5下拉刷新.零依赖,高性能,多主题,易拓展 https://ask.dcloud.net.cn/article/12772 图像(头像)选择,截取,压缩,上传的分享 https://ask.d ...