css3 transition等属性,持续更新...

原创 2016年08月31日 09:54:11

1.transition属性:

参考网站:http://www.runoob.com/cssref/css3-pr-transition-timing-function.html

transition属性:
例子:
div
{
    width:100px;
    height:100px;
    background:red;
    transition:width ease 2s;
    -webkit-transition:width 2s; /* Safari */
}

div:hover
{
    width:300px;
}

鼠标放在div上将逐渐在2s内该变宽度至300px;

transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timing-function,and transition-delay。
注意: 始终指定transition-duration属性,否则持续时间为0,transition不会有任何效果。
默认值:all 0 ease 0
js语法: object.style.transition = "width 2s";
描述
transition-property 指定CSS属性的name,transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候
例子:
div
{
    width:100px;
    height:100px;
    background:red;
    transition:transform 1s ease 1s;
    -webkit-transition:transform 2s ease 1s;
}

div:hover
{
    transform:translate(200px, 0px);
}

当鼠标移在div上,1s延迟后,div向右以ease方式,在2s内,移动200px。

还有transition属性的分解写法:
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    transition-property:width;
    transition-duration:2s;
    transition-delay:2s;
    transition-timing-function: ease;

/* Safari/Chrome */
-webkit-transition-property:width; 
-webkit-transition-duration:2s;
-webkit-transition-delay:2s;
-webkit-transition-timing-function: ease;
}

div:hover
{
    width:300px;
}
</style>
transition-timing-function属性值:属性指定切换效果的速度;此属性允许一个过渡效果,以改变其持续时间的速度;默认值ease;
描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
关于速度曲线,以及linear(匀速)、ease-in、ease-out等的用法见参考网站,上面有例子。


版权声明:本文为博主原创文章,未经博主允许不得转载。

13.(初级)CSS变形transform、过度transition、动画animation注意点及如何让动画更流畅方法

一、变形transform 1、倾斜skew() skew(水平倾角,垂直倾角) 例如: skew(20deg,30deg)   2、移动变形原点transform-origin transform-...
  • majun0007
  • majun0007
  • 2017年02月07日 14:53
  • 1562

Chrome渲染Transition时页面闪动Bug

前段时间,有同事和会员反馈使用Chrome访问淘宝首页会出现画面闪动的现象,但是我在Mac和Win下面的Chrome都无法重现这个问题,后来重装了一遍Win7下的Chrome Beta版本,终于重现了...
  • ft6302244
  • ft6302244
  • 2015年04月08日 13:46
  • 2617

CSS3动画下拉菜单(当transition遇到display的坑)

下拉菜单是页面中很常见的一个元素,但是和标签的默认外观实在不怎么好看,而且它们还很难通过CSS来修改成合意的样式,对hover效果的支持也不好,因此往往会使用或是、这些标签来模拟出下拉菜单的效果。 使...
  • touchingt
  • touchingt
  • 2015年09月21日 18:15
  • 6026

CSS3中的Transition过度与Animation动画属性使用要点

这篇文章主要介绍了CSS3中的Transition过度与Animation动画属性使用要点Transition和Animation能被用来制作基本的页面图片动态效果,当然进一步的控制还是需要JavaS...
  • Alifangxin
  • Alifangxin
  • 2017年12月30日 08:53
  • 36

CSS3 transition 属性过渡效果 详解

CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添...
  • Techzero
  • Techzero
  • 2014年04月15日 10:59
  • 2261

第四课:css3-圆角 | 文本属性(文本超出部分省略) | 过渡transition | 动画animation

一、圆角|文本属性 1、知识点汇总 a、border-radius: 百分比 | px;当大于或等于正方形盒子宽度的一半就变成了圆; b、border-image: 兼容性不是很好,不做整理; c、...
  • itsme_web
  • itsme_web
  • 2017年04月23日 14:10
  • 349

CSS3中的Transition属性详解

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

css3动画属性--transition(转换)

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。 语法: transition : [ || || || [, [ || || || ]]* transit...
  • tyler1108
  • tyler1108
  • 2015年03月24日 18:15
  • 2524

CSS3--利用transform和transition属性制作扇形导航

在前面,我们已经讲解了transform这个属性以及案例,那么本文会进一步结合transform和transition两个属性,并制作一个简单的案例进行说明。 一、transition属性说明 接下来...
  • u010297791
  • u010297791
  • 2017年01月12日 21:50
  • 699

CSS3中动画效果新属性----transition&transform

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,...
  • dongfanghaoyu
  • dongfanghaoyu
  • 2013年07月05日 17:04
  • 1058
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3 transition等属性,持续更新...
举报原因:
原因补充:

(最多只允许输入30个字)