使用transition样式让效果的变化更加平滑

时间 2019-11-08

标签使用 transition 样式效果变化更加平滑繁體版

原文原文链接

1、CSS3样式transition介绍

做用：transition在英文中的意思是过渡和转变，顾名思义，在CSS中添加这个样式能够让一些效果的变化产生过渡效果而让人不会感受突兀；css
transition属性的值 transition属性有四个经常使用值； 1.property：属性（设置效果的CSS样式名）； 2.duration：持续时间（设置效果持续的时间）； 3.timing-function：过渡效果的时间线（设置效果的快慢变化）；该值有五个可选选项： linear 规定以相同速度开始至结束的过渡效果。 ease 规定慢速开始，而后变快，而后慢速结束的过渡效果。 ease-in 规定以慢速开始的过渡效果。 ease-out 规定以慢速结束的过渡效果。 ease-in-out 规定以慢速开始和结束的过渡效果。此外还能够使用cubic-bezier(n,n,n,n)函数对n进行数字设置来控制效果的时间线； 4.delay：过渡效果延迟多少时间再展现（设置过渡效果的触发时机）；html
transition属性的写法（缩写） transition: property duration timing-function delay; 浏览器

2、小例子展现transition样式的使用

使用transition样式的property和duration使鼠标移动上去后背景色产生淡入淡出的效果

使用property，duration和timing-function使div宽度变宽，切变化速度由块到慢；代码以下（效果没法截图显示，可自行复制展现）：函数

<!DOCTYPE html> 
<html> 
<meta charset="uft-8">
<head> 
<style>
    div {
        width: 200px;
        height: 200px;
        background: yellow;
        transition: width 5s ease;
    }
    div:hover {
        width: 1000px;
    }
</style> 
</head> 
<body> 
     <div></div>
</div> 
</body> 
</html>
复制代码

3、注意点

由于transition是CSS3的新样式，因此要考虑兼容性问题，下面是transition在各大浏览器上的兼容性；

2.transition的property值可以使用all来使多种效果同时过渡；spa

参考连接w3schoolssr