transition 的使用?
代言
代言 2017-01-23 15:30:15
[HTML讨论组]

1883152782-5880341e9a938_articlex.png

發現這個效果
移過去會先放大,然後最後再縮小一點 有點彈簧的感覺
這種效果該怎麼做?

我看到他transition 語法似乎是可以累加的?請問有大神能解釋原理嗎?


代言
代言

全部回复(1)
大家讲道理

第一個transform使用矩陣表示。就是把translate、rotate等等之類的transform變換效果一起用一個矩陣表示了。
第二個transition-delay表示延遲,即每種過渡在觸發後多久才開始,每一個與下面的屬性一一對應。
第三個transition-duration表示每種屬性的過渡時間,同樣一一對應。
第四個transition-property就是要進行過渡動畫的屬性名,有transform和透明度(加了一個兼容的transform)
第五個transition-timing-function是過渡效果速度曲線,除了線性變化(勻速),ease-XX(提供的分成三段,先快後慢之類的),還可以使用貝塞爾曲線cubic-bezier(n,n,n,n),貝塞爾曲線就可以做出你說的回彈效果(即超出最大或最小值再彈回去)

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号