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实现了按钮中间白、四周黑,上方白、下方灰的效果。