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

作者: 大春春 | 来源:发表于2016-12-25 15:57 被阅读0次

使用transition样式让效果的变化更加平滑
transition vs transform vs trans
css3 过渡和动画
transition过渡效果
前端基础：CSS3 新增属性总结
flutter2环境下的ListView
Transition属性详解
面试官: css3动画了解吗? 我: .......
CSS进阶七：transition，transform，anim
动画

一、CSS3样式transition介绍

作用：transition在英文中的意思是过渡和转变，顾名思义，在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：过渡效果延迟多少时间再展示（设置过渡效果的触发时机）；
transition属性的写法（缩写）
transition: property duration timing-function delay;

transition写法

二、小例子展示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>