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

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. .net core 滑动+点击汉字验证码

    用 .net core 写的  滑动+点击汉字的验证码,代码比较简单就不做说明了. github地址  https://github.com/wangchengqun/NetCoreVerificat ...

  2. WPF添加样式字典Style

    新建Resource Dictionary文件,取名Style: 将常用的样式写入该文件: 在App.xaml中引用该文件: <Application x:Class="Machine ...

  3. 3D Spherical Geometry Kernel( Geometry Kernels) CGAL 4.13 -User Manual

    Introduction The goal of the 3D spherical kernel is to offer to the user a large set of functionalit ...

  4. 2D Circular Geometry Kernel ( Geometry Kernels) CGAL 4.13 -User Manual

    1 Introduction The goal of the circular kernel is to offer to the user a large set of functionalitie ...

  5. JAVA 从头开始<一>

    一.前言 之前用的是C#,公司最近听说要做的新项目是用JAVA的,所以就学一下JAVA是怎么使的,顺便记录一下. 二.软件的安装 1.下载 我系统是WIN10 x64的 下载完成 2.安装 ①习惯性 ...

  6. gridview获取选中行索引及当前行数据

    gridview获取选中行索引及当前行数据 一.非直接绑定数据: <!--前台传值--> <asp:TemplateField HeaderText="操作"&g ...

  7. 批处理系列(13) -从视频导出高质量GIF图片

    需要ffmpeg,配置ffmpeg到环境变量. 保存代码到HQGIF.bat,与视频同目录,管理员权限运行CMDcd到此目标目录: HQGIF.bat input_video_name.mp4 out ...

  8. 第五章 ReentrantLock源码解析1--获得非公平锁与公平锁lock()

    最常用的方式: int a = 12; //注意:通常情况下,这个会设置成一个类变量,比如说Segement中的段锁与copyOnWriteArrayList中的全局锁 final Reentrant ...

  9. 如何使用socket进行java网络编程(四)

    在上一篇的结尾,提到过用来处理每一个服务端accept到的socket,我们由原来最开始的单线程改成了多线程去处理,但是对每一个接收到的socket都new一个thread去处理,这样效率太低,我们需 ...

  10. MySQL(作业练习)

    day59 参考:http://www.cnblogs.com/wupeiqi/p/5748496.html 现有数据库 /* Navicat Premium Data Transfer Source ...