一个元素在不同的状态之间进行平滑的交换

CSS3中使用transition属性实现过度效果

一个简单的例子:

img{
background-image:url("img/1.jpg");
} img:hover{
transform:rotate(180deg); //2D转换:顺时针旋转180°
background-color:green; //背景颜色:绿色
}
这样的话鼠标悬停 图片会立马旋转180° 背景颜色也会立刻显示,没有任何过度效果

如果我们给img元素添加以下代码

img{
transition:2s; //过度:2s内完成
}

那么整个图片旋转的时候会显得很完美、平滑

语法:

  transition:过度属性 执行时间 时间函数 延迟时间;

      过度属性:可选值。指定将要进行过度变换的Css属性

        (如:tansition:tansform 2s)多个属性过度效果 (tansition:tansform 0.2s,background 2s)也可是使用all 默认值

      执行时间:可选值。默认值是0 指定过度效果从执行到结束使用的时间

      时间函数:可选值 设置元素运动的速度

          贝塞尔曲线关键字:默认值ease  linear  ease-in  ease-out  ease-in-out  cubic-bezier();    

      延迟时间:可选值。设置多长时间后开始执行过度。默认值是0;

CSS3 transition 过度的更多相关文章

  1. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  2. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  3. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  4. 【转】CSS3 transition规范的实际使用经验

    原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...

  5. CSS3 transition规范的实际使用经验

    本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...

  6. css3 Transition动画执行时有可能会出现闪烁的bug

    css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...

  7. CSS3 transition 属性过渡效果 详解

    CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...

  8. CSS3 & transition & animation

    CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...

  9. CSS3 transition 动画过度属性

    <!DOCTYPE html> <html> <head> <style>  div { width:100px; height:100px; back ...

随机推荐

  1. Asp.Net从相对路径获取绝对路径的方法(不需要httpcontext上下文也可)

    //如果拿不到当前HttpContext上下文的话可以用该方法取得绝对路径 var filePath = HostingEnvironment.MapPath("需要获取绝对路径 的 相对路 ...

  2. Android Google Analytics

    基础知识: 一个统计条目包含两类,一种是 screen,另一种是 event. Screen 包括 screen name. Event 包括  category,action,label 和 val ...

  3. jzoj5347

    tj:80pts:維護f[i][j]表示當前第i個方塊必須選,且選了j個的最優解,設w[i]為第i個方塊長度 則可以枚舉上次選了第k個方塊,則f[i][j]=max{f[k][j-1]+w[i]*(i ...

  4. Swift 里字符串(三)small String

     small string, 只有两个 UInt64 的字,这里面存储了所有的信息. 内存布局如下:  第二个 UInt64 存储了标记位和长度信息,以及部分字符串的值 // Get an int ...

  5. Django的常用方法以及配置

    在setting 中配置能生成  sql log 的内容 LOGGING = { , 'disable_existing_loggers': False, 'handlers': { 'console ...

  6. 【xsy1230】 树(tree) 点分治+线段树

    题目大意:有一棵$n$个节点的树,点的标号为$1$到$n$.树中的边有边权.给你$m$个询问,每个询问包含三个参数$l,r,pos$,你要求出标号在$l$到$r$之间的所有点中,到节点$pos$距离最 ...

  7. 转MVC3介绍

    第一节:Asp.Net MVC3项目介绍 让我们先看一下,一个普通的Asp.Net MVC3项目的样例,如下图所示 跟WebFrom还是有区别的,如果你已经了解Asp.Net MVC2的话,那就感觉异 ...

  8. 面试题:js如何渲染十万条数据并不卡住界面

    这道题考察了如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次. ...

  9. 数据库MySQL(课下作业,必做)

    数据库MySQL(课下作业,必做) 题目要求: 下载附件中的world.sql.zip, 参考http://www.cnblogs.com/rocedu/p/6371315.html#SECDB,导入 ...

  10. TapTap推广统计逻辑

    当我们在Taptap上访问某款游戏时,比如https://www.taptap.com/app/34762,taptap会记录下这次访问,它是怎么做的呢. 首先,用记事本打开这个网址,在head部分看 ...