CSS3过渡（transition）

最新推荐文章于 2021-06-24 00:16:52 发布

是六月

最新推荐文章于 2021-06-24 00:16:52 发布

阅读量222

点赞数

分类专栏：前端CSS3 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45929716/article/details/105141198

版权

前端CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

欢迎访问的我的个人博客http://liubofeng.com/

CSS3过渡（transition）

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

1、transition-property属性

功能：检索或设置对象中参与过渡的属性。

语法：

transition-property:none|all|property;

参数说明：

none：没有属性改变。
all:所有属性改变，默认值。
property：元素属性名。

2、transition-duration属性

功能：检索或设置对象过渡的持续时间。

语法：

transition-duration：time；

参数说明：
规定完成过渡效果所需要的时间（以秒或毫秒为单位）
默认值为0。

3、transition-timing-function属性

功能：检索或设置对象中过渡的动画类型。

语法：

transition-timing-function:ease|linear......

参数说明：

参数	说明
linear	线性过渡。等同于贝塞尔曲线（0.0，0.0，1.0，1.0）
ease	平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in	由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out	由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out	由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start	等同于 steps(1, start)
step-end	等同于 steps(1, end)
steps([,[start/end]]?）	接受两个参数的步进函数。第一个参数：必须为正整数，指定函数的步数。第二个参数：取值可是start或end，指定每一步的值发生变化的时间点，可选，默认为end。
cubic-bezier(number,number,number,number)	特定的贝塞尔曲线类型，4个数值需在[0,1]区间内

4、transition-delay属性

功能：检索或设置对象延迟过渡的时间。

语法：

transition-delay：time；

参数说明：

默认值为0

5、transition复合属性

语法：

transition：property duration timing-function delay；

编程练习：
当我们鼠标经过一个元素的时候，该元素翻转360°并且放大一倍显示。效果图如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>3-2</title>
  <style type="text/css">
   div{font-size: 14px;font-weight: bold;line-height: 50px;
    position: fixed;top: 0;right: 0;bottom: 0;left: 0;
    width: 200px;height: 50px;margin: auto;
    cursor: pointer;
    text-align: center;
    background: #abcdef;
    transform: rotate(0deg);
    -webkit-transition: transform 2s ease-in-out 1s;
    -moz-transition: transform 2s ease-in-out 1s;
     -ms-transition: transform 2s ease-in-out 1s;
     -o-transition: transform 2s ease-in-out 1s;
     transition: transform 2s ease-in-out 1s;
    }
   div:hover{transform: rotate(360deg) scale(2);
    -webkit-transition: transform 2s ease-in-out 0s;
     -moz-transition: transform 2s ease-in-out 0s;
     -ms-transition: transform 2s ease-in-out 0s;
     -o-transition: transform 2s ease-in-out 0s;
     transition: transform 2s ease-in-out 0s;
    }
  </style>
 </head>
 <body>
  <div>www.imooc.com</div>
 </body>
</html>

是六月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3过渡（transition）

CSS3过渡允许CSS的属性值在一定的时间的区间内平滑地过渡。在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地已动画效果改变CSS的属性值。1、transition-property属性功能：检索或设置对象中参与过渡的属性。语法：transition-property:none|all|property;参数说明：none：没有属性改变。all:所有属性改变，默...
复制链接

扫一扫

专栏目录