欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS动画之Tranistion_html/css_WEB-ITnose

程序员文章站 2022-04-14 11:12:03
...
在以前的浏览器,为了达到丰富的页面表效果,一般会使用FLASH来做一些小动画,便是FLASH这货本身不是浏览器自己亲生,需要有插件支持才能运行,在没有插件的浏览器上就是一片黑,很难看。

CSS3时代的到来,CSS3动画也随之诞生,良好的兼容性(请自动忽视IE9以下→_→)和性能,不使用任何插件,就可以让网页拥有平滑的过渡,丰富的交互,酷炫的动画。而且与HTML5相结合,还可以做出一些有趣的小游戏。

CSS3动画很强大,但简单来说,其实就是两个CSS3的属性,一个是transition,一个是animation。transition不如animation强大,但是做一些元素的过渡,还是非常有用的。

###Transition

语法:transition: property duration timing-function delay;transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property:规定设置过渡效果的 CSS 属性的名称。
  • transition-duration:规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function:规定速度效果的速度曲线。
  • transition-delay:定义过渡效果何时开始。

##transition-property

  • none: 没有属性会获得过渡效果。
  • all:所有改变属性都将获得过渡效果。
  • property:定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔,比如说width,height等。

例子:width有过渡效果:

```bash

CSS动画之Tranistion_html/css_WEB-ITnose

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关标签: CSS动画之Tranistion