css3中通过transition属性可以实现一些简单的动画过渡效果~

1、语法

transition: property duration timing-function delay;

transition 属性设置元素当过渡效果,是一个复合属性,包括四个简写属性:

  • transition-property:指定CSS属性的name,transition效果(默认值:all)
  • transition-duration(必须):过渡效果持续时间(不指定默认为0,不会有任何效果
  • transition-timing-function:指定过渡效果的转速曲线(默认值:ease)
  • transition-delay:指定过渡延迟开始时间(默认为0)

注意:IE9及以下不支持该属性,safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀;而其余高版本浏览器支持标准写法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.tra{
width: 50px;
height: 50px;
background-color: lightcoral;
/* 复合属性 */
transition: all 2s ease 0s;
/* 采用以下分属性也是可以的 */
transition-duration: 2s;
transition-property: all;
transition-timing-function: ease;
transition-delay: 0s;
}
.tra:hover{
width: 200px;
}
</style>
</head>
<body>
<div class="tra"></div>
</body>
</html>

运行效果:

注意:在使用 transition 复合属性时,各个属性用空格隔开,不能使用 ,

2、分属性

(1)transition-property

transition-property属性可以指定需要过渡的css属性,默认值为all表示所有属性都过渡(不写该属性值也表示all),如果为none则没有任何属性存在过渡效果

.tra{
width: 50px;
height: 50px;
background-color: lightcoral;
/* 指定 width 属性过渡 */
transition: width 2s ease 0s;
}
.tra:hover{
width: 200px;
height: 100px;
}
<div class="tra"></div>

只指定 width 属性过渡, height 属性未指定

注意:并不是所有css属性都可以过渡,只有具备中间值的属性才有过渡效果,比如 display:block 不能过渡为 display:none

(2)transition-duration

transition-duration属性可以用来设置一个属性过渡所需要的时间,也就是该属性从旧值到新值过渡所需时间(持续时间),默认值为0s,不指定就没有过渡效果

.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
/* 此处transition-property省略,默认为all */
/* 指定过渡时间为2s */
transition: 2s ease 0s;
}
.tra:hover{
width: 100px;
height: 100px;
}

注意:

  • 不能为负值
  • 必须带上单位,单独一个数字无效
  • 该值为单值时,即所有过渡属性都对应同样时间;该值为多值时,过渡属性按照顺序对应持续时间
.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral; transition-property: width,background;
transition-timing-function: ease;
transition-duration: 5s, 2s;
/* 以上分属性等价于下面复合属性写法 */
transition: width 5s ease 0, background 2s ease 0;
}
.tra:hover{
width: 100px;
background-color: blue;
}

当该值为多值时,过渡属性按照顺序对应持续时间

(3)transition-timing-function

transition-timing-function属性指的是过渡的“缓动函数”,用来指定属性过渡时动画运动形式,值可以是关键字、贝塞尔曲线(bezier),默认值为ease

关键字:linear| ease| ease-in| ease-out| ease-in-out|

贝塞尔:cubic-bezier(n,n,n,n);

.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
/* transition-timing-function默认值为ease */
transition: 1s linear| ease| ease-in| ease-out| ease-in-out|;
}
.tra:hover{
border-radius: 50%;
background-color: blue;
}

ease :开始和结束慢,中间快

linear :匀速

ease-in :开始慢,越来越快

ease-out :结束慢,越来越慢

ease-in-out :先加速后减速,与ease类似,但比ease幅度大

cubic-bezier(n,n,n,n) 贝塞尔曲线中4个值随意调整,就会得到不同的效果

.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
transition: 1s cubic-bezier(.75,2.03,0,.14);
}
.tra:hover{
border-radius: 50%;
background-color: blue;
}

(4)transition-delay

transition-delay属性指定过渡开始前的延迟时间

.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
/* 2s过后过渡才开始执行 */
transition: 1s cubic-bezier(.75,2.03,0,.14) 2s;
}
.tra:hover{
border-radius: 50%;
background-color: blue;
}

3、结束语

最后再说明补充两点内容:

1、触发方式:transition属性并非只有hover才能触发,其他比如【点击事件】【获得/失去焦点】【长按】等操作都可以触发transition属性过渡

2、事件回调:transition属性只有一个事件,那就是transitionend事件,它在过渡事件完成后触发

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#test{
height: 60px;
width: 60px;
background-color: lightpink;
transition: width 1.5s;
font-size: 12px;
}
#test:hover{
width: 250px;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
<script>
//监听 transitionend 事件
test.addEventListener("transitionend", myFunction);
// 回调函数
function myFunction(e){
e = e || event;
test.innerHTML = "过渡结束,执行事件回调内容"
}
</script>
</html>

css3中transition属性详解的更多相关文章

  1. CSS3中border-image属性详解

    border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...

  2. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  3. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  4. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  5. CSS3中的Transition属性详解

    w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  6. CSS3中的Transition属性详解(贝赛尔曲线)

    transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...

  7. 第98天:CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  8. Android中shape属性详解

    一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标签怎么用. 1.新建shape文件 首先在res/drawable文件夹下,新建一个文件,命名为:shape_radius.x ...

  9. spring sessionFactory 属性配置详解,applicationContext中各种属性详解

    1.Bean的id为sessionFactory,对应的类为AnnotationSessionFactory,即采用注解的形式实现hibernate. 2.hibernateProperties,配置 ...

  10. Javascript中prototype属性详解

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

随机推荐

  1. 动力节点Java培训告诉你Java线程的多功能用法

    现在的java开发可谓是八仙过海各显神通啊!遥想当下各种编程语言萎靡不振,而我Java开发异军突起,以狂风扫落叶之态,作为Java培训行业的黄埔军校,为了守护Java之未来,特意总结了一些不被人所熟知 ...

  2. github for window的代理设置方法

    修改 .gitconfig 文件,主要是针对http 和 https进行修改,设置代理 [user] name = name email = mail@.com [http] proxy = 配置文件 ...

  3. 突破php的imagecopyresampled 和imagecopyresized 实现图片马JPG

    编辑器加载中...之前有人发布了 利用PNG 图片上述压缩函数的方法 原理利用 PNG的结构IDAT chunks填充一句话webshell,并进行一套取模运算 详见: https://www.ido ...

  4. 【Bootstrap基础学习】01 Bootstrap的CSS

    Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型. <!DOCTYPE html> <html lang="zh-CN& ...

  5. OpenCV3编程入门笔记(3)线性滤波、非线性滤波、图像深度、通道

    15     遍历图像中的像素,是先for行数后for列数的,也就是一列一列的遍历,matlab中是从1开始计数,opnecv中采用c语言的从0开始计数. 矩阵归一化:normalize()函数,参数 ...

  6. thinkphp 操作xml格式

    前言:虽然xml的格式看起来跟html差不多,但是最近做项目由于用的是thinkphp5.0的版本,做的过程中还是遇到了一些问题.在这里做一下记录. 首先我们需要定义一个dom对象,我们都知道 php ...

  7. (素材源代码)猫猫学IOS(四)UI之半小时搞定Tom猫

    下载地址:http://download.csdn.net/detail/u013357243/8514915 以下是执行图片展示 制作思路以及代码解析 猫猫学IOS(四)UI之半小时搞定Tom猫这里 ...

  8. spring Annotation based configuration

    spring 注解相关 https://docs.spring.io/spring/docs/3.0.0.M3/reference/html/ch04s11.html

  9. mybatis 在存储Integer、bigdecimal等java数据类型时,将0存成null

    我们的项目中,有关于金额的计算,所以,一般在java环境中我们使用bigdecimal来做运算和存储金额信息.数据库sqlServer2008用的float类型 问题是,当我将金额赋值成0时,很意外的 ...

  10. Flyweight模式(亨元模式)

    这应该算是最好理解的一个设计模式了吧·················· 面向对象语言的原则就是一切都是对象,但是如果真正使用起来,有时对象数可能显得很庞大,比如,字处理软件,如果以每个文字都作为一个 ...