CSS3 过渡效果transition的基本使用

html-css09

CSS3 过渡效果transition的基本使用,第1张

在CSS3中新增了元素的过渡效果属性:transition

transition也是一个复合属性,包括四个值分别是:

1. transition-property

2. transition-duration

3. transition-timing-function

4. transition-delay

基本使用如下:

多个属性可以单独设置,也可以通过transition一起设置

例如:点击按钮时,方块宽度由100px变成200px,延迟1s,过渡时间用了2s,速度是按照cubic-bezier设定的一个速度

以上就是transition的基本使用!

transform呈现的是一种变形结果,而transition呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。

transition属性是一个简写属性,用于设置四个过渡属性

transition-property :指定要过渡的css属性

transition-duration: 指定完成过渡花费的时间

transition-timing-function: 指定速度效果的速度曲线

transition-delay:指定过渡效果何时开始

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

button {width: 100pxheight: 50pxborder: 0color: whitebackground: -webkit-radial-gradient(#72787f, #545c64)}

3、浏览器运行index.html页面,此时用CSS实现了按钮中间白、四周黑,上方白、下方灰的效果。