css3过渡动画怎样使用

简介:
通过
CSS3,我们可以在不使用js的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。他的属性为:transition,但是他也有他的缺点,Internet
Explorer 9 以及更早的版本,不支持 transition属性。那么他是怎么应用的呢,比如我们官网首页服务流程的几个小图标,鼠标滑上去会转动。

他的样式是这样去写的:

这样的话当鼠标滑过变成另一种样式就有了一个过渡效果。那么他具体有那些属性呢:

如果你想让他变宽,时间长为两秒,你就可以这样去写,

div

{

transition: width 1s;

-moz-transition: width 1s;

-webkit-transition: width 1s;

-o-transition: width 1s; }

}

不同的浏览器兼容的写法是不一样的,上面已标明。如果是变化高度,只需要把width改成height即可

具体属性为:
transition-property:规定应用过渡的CSS 属性的名称。transition-duration:定义过渡效果花费的时间。默认是0。
transition-timing-function:规定过渡效果的时间曲线。默认是"ease"。
transition-delay:规定过渡效果何时开始。默认是 0。

注意:如果网站要求兼容IE
那么还是不建议去使用。因为这个属性只兼容到IE10,IE9及以下不兼容!

来源: 德客易采
目录
相关文章
|
2天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
49 34
|
3月前
|
机器学习/深度学习 前端开发 JavaScript
|
18天前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
48 22
|
2月前
|
移动开发 前端开发 JavaScript
除了 CSS3,还有哪些技术可以实现动画效果?
除了 CSS3,还有哪些技术可以实现动画效果?
144 63
|
2月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
63 31
|
3月前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
127 58
|
1月前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
56 6
|
2月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
85 7
|
2月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
36 6
|
2月前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
30 2

热门文章

最新文章