css3过渡和css3动画它们都能实现动画效果,只是写的方式不一样,是吗?

html-css022

css3过渡和css3动画它们都能实现动画效果,只是写的方式不一样,是吗?,第1张

css3动画:

可以自定义节点改变属性,例如30%,40%....这种节点式定义属性的状态值,相对过度来说,可以把一系列的属性变化按照顺序节点来执行,这就好比把动画封装成了一个“函数”,既可以共用,又可以根据改变html标签元素的class来增加或者删除动画效果,动画最好用在写复杂效果的时候用,或者有定义触发一个事件然后删除动画、增加动画时候用。我做轮换图的时候就是js触发,然后使元素拥有一个class引用,class对应的就是动画,很灵活的控制了动画的执行。

过渡效果

过渡效果顾名思义,只是一个简短的过渡,它只能定义一个状态(css属性)到另一个状态,没有节点,所以做不了太复杂的效果,但是相对效率比较高,能用过渡的就不用css3动画,当然两者都是各有优劣,没有任何一种属性是没有用的,合理才是最重要的!

需要准备的材料分别有:电脑、浏览器、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实现了按钮中间白、四周黑,上方白、下方灰的效果。

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

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

1. transition-property

2. transition-duration

3. transition-timing-function

4. transition-delay

基本使用如下:

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

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

以上就是transition的基本使用!