成都网站建设设计

将想法与焦点和您一起共享

如何在css中使用transition属性

这篇文章给大家介绍如何在css中使用transition属性,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联专注于银州企业网站建设,响应式网站开发,电子商务商城网站建设。银州网站建设公司,为银州等地区提供建站服务。全流程按需求定制设计,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

css的三种引入方式

1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。2.内嵌样式,就是将CSS代码写在之间,并且用

进行声明。3.外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上

就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@import样式导入CSS样式表,不建议使用。

一、对transition属性的认识

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

transition-property     过渡效果的 CSS 属性的名称(height、width、opacity等)。
transition-duration   完成过渡效果需要时间。
transition-timing-function     规定速度效果的速度曲线。
transition-delay          过渡效果何时开始(延迟时间)。

注:如果 transition-duration属性时长为 0,就不会产生过渡效果。

2、渐变函数的值:

渐变函数是transition-timing-function;

其中贝塞尔曲线的预设值

    ease渐快,匀速,减慢cubic-bezier(0.25,0.1,0.25,1)
    ease-in渐快,匀速cubic-bezier(0.42,0,1,1)
    ease-out匀速,减慢cubic-bezier(0,0,0.58,1)
    ease-in-out和ease类似,但比ease的加速度大(幅度大)cubic-bezier(0.42,0,0.58,1)
    linear全程匀速cubic-bezier(0,0,1,1)

3、简写方式:transition:css属性名  过度时间  渐变函数值  延迟时间;

二、简单动画实例操作

1、先插入两张图片


        
        
    

2、给图片设置样式

关于如何在css中使用transition属性就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享文章:如何在css中使用transition属性
文章分享:http://chengdu.cdxwcx.cn/article/pjcgio.html

其他资讯