css过渡transition

定义

　　过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个紫属性。通过这四个子属性的配合来完成一个完整的过渡效果。

　　transition-property:过渡属性（默认值为all）

　　transition-duration:过渡持续时间（默认值为0s）

　　transition-timing-function:过渡函数（默认值为ease函数）

　　transition-delay:过渡延迟时间（默认值为0s）

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

       <style>.test{width:100px;height:100px;background:pink;transition-duration:3s;/*过渡持续时间*/transition-property:all;/*过渡属性*/transition-timing-function:ease;/*过渡函数*/transition-delay:0s;/*过渡延迟时间*/}.test:hover{width:500px;}</style>   <div class="test"></div>

//鼠标移动到元素上，会出现宽度变化效果

复合属性

　　过渡transition的这四个子属性只有<transition-duration>是必需值且不能为0。其中，<transition-duration>和<transition-delay>都是时间。当两个时间同时出现时，第一个是<transition-duration>，第二个是<transition-delay>，当只有一个时间时，它是<transition-duration>，而<transition-delay>为默认值0

transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

　　[注意]transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值)；而空格隔开的代表不同属性的四个关于过渡的子属性

参考文章：http://www.cnblogs.com/xiaohuochai/p/5347930.html

转载于:https://www.cnblogs.com/rachelch/p/7515828.html

css过渡transition相关推荐

CSS 过渡 transition
CSS 过渡允许在给定的时间内平滑地改变属性值. 下表列出了所有 CSS 过渡属性: 属性描述 transition 简写属性,用于将四个过渡属性设置为单一属性. transition-delay ...
CSS过渡-transition
1.CSS Transition CSS Transition提供了一种在更改CSS属性时控制动画速度的方法.其设置可以让元素的样式在变化过程中有一个过渡,而不是立即生效的.比如,将一个元素的颜色从白 ...
Vue过渡效果之CSS过渡
前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...
css过渡取消过渡_CSS过渡
css过渡取消过渡 There are two ways to create animations with pure CSS: CSS animations and CSS transition ...
css动画及css过渡
一.css动画 1.定义动画:使用@keyframes定义动画,关键帧可以使用关键字from~to,也可以使用 0%~100% 2.配置动画: 1) animation-name ...
html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...
利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为<纯CSS制作下拉导航菜单> ...
CSS3 过渡(Transition)
过渡 transition 复合属性,使CSS属性值在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果取值: <'transitio ...
[css] 过渡和动画的区别是什么？
[css] 过渡和动画的区别是什么? 相同:都会让你的页面元素动起来区别: 过渡 transition1.需要事件触发,比如hover,focus,checked , js改, @media que ...
html隐藏并失效,如果元素开始隐藏，css过渡将不起作用
小编典典要清楚地了解情况,您需要了解CSSOM和DOM之间的关系. 在先前的Q / A中,我对重绘过程的工作方式进行了一些开发. 基本上,有三个步骤,DOM操作,重排和绘制. 第一个( DOM操 ...

css过渡transition

css过渡transition相关推荐

最新文章

热门文章