CSS3——过渡

最新推荐文章于 2024-05-07 23:04:30 发布

adve

最新推荐文章于 2024-05-07 23:04:30 发布

阅读量381

点赞数 1

分类专栏： css3

本文链接：https://blog.csdn.net/qq_33430421/article/details/90896858

版权

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值，网页加载不能触发过渡效果。

transition-property

transition-property：检索或设置对象中参与过渡的属性。语法 transition-property：none | all |property(某一个具体属性的名称)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-property</title>
<style type="text/css">
body { background: #abcdef; }
div { width: 800px; height: 800px; margin: auto; 
      transform: rotate(0deg); 
      background: url(images/imooc.png) no-repeat center center, 
      url(images/circle_outer.png) no-repeat center center;
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
}
</style>

transition-duration

transition-duration：检索或设置对象过渡的持续时间语法 transition-duration：time；默认是0，单位为 s 或 ms

<style type="text/css">
body { background: #abcdef; }
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
}
</style>

transition-timing-function

transition-timing-function：检索或设置对象过渡的动画类型

过渡的方式：transition-timing-function:ease / linear / ease-in / ease-out / ease-in-out
linear:线性过渡（匀速）
ease:平滑过渡（规定慢速开始，然后变快，然后慢速结束的过渡效果）--结束比较生硬
ease-in:由慢到快（规定以慢速开始的过渡效果）--结束比较生硬
ease-out：由快到慢（规定以慢速结束的过渡效果）
ease-in-out：规定以慢速开始和结束的过渡效果-- 使整个过渡效果最圆滑、平缓。--最佳过渡方式。