CSS3过渡 transition

CSS3过渡
  • 添加某种效果可以从一种样式转变到另一个的样式。transition: width 2s, height 2s;
    1. 指定要添加效果的CSS属性
    2. 指定效果的持续时间
  • 过渡属性
    • transition  简写属性，用于在一个属性中设置四个过渡属性
    • transition-property  规定应用过渡的 CSS 属性的名称 transition-property：all ;
    • transition-duration  定义过渡效果花费的时间。默认是 0
    • transition-timing-function  规定过渡效果的时间曲线。默认是 "ease"   cubic-bezier(0,1.95,.83,.67)贝塞尔曲线
    • transition-delay  规定过渡效果何时开始。默认是 0
 1 div{
 2             width: 100px;
 3             height: 100px;
 4             background: red;
 5             /* 设置过渡css的属性 */
 6             transition-property: all;
 7             /* 过渡延迟时间 */
 8             transition-delay: 2s;
 9             /* 完成过渡需要花费的总时间 */
10             transition-duration: 4s;
11             /* 过渡动画的运动方式  贝塞尔曲线*/
12             transition-timing-function: cubic-bezier(0,1.95,.83,.67)
13              /* transition-timing-function:ease; */
14         }
15         div:hover{
16             width: 200px;
17             height: 200px;
18             background: greenyellow;
19         }
posted @ 2020-08-21 21:48  帅气巴巴  阅读(100)  评论(0)  编辑  收藏  举报