css transiton 用法

最新推荐文章于 2024-04-25 16:16:15 发布

xhmz

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： css3 html5

本文链接：https://blog.youkuaiyun.com/q_12341234/article/details/38228177

版权

前端专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS中的过渡效果，包括如何设置元素的过渡属性、不同的过渡类型及其效果，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用：就是让hover的变化效果按设置的时间慢慢的变化，形成一种动态的过渡效果

基本语法：

div
{
width:100px;

height:100px; 本来设置的

transition: width,height 2s; /*动画效果，2s是变化经历时间，形成一种动态的过渡效果*/

/*只需要宽度时：transition:width 2s; 高度一样*/

-moz-transition:  2s; /* Firefox 4 */
-webkit-transition:  2s; /* Safari 和 Chrome */
-o-transition:  2s; /* Opera */

/**

为了兼容所有浏览器，作用和transiton一样,-*-前缀是浏览器内核的对应,

会优先使用兼容正在使用浏览器的属性;

比如你现在使用的是火狐浏览器,属性中有

transition-delay:2s;

-moz-transition-delay:5s;

会优先选择-moz-transition-delay:5s; **/

div:hover{

width:300px;

height:300px; 动态变换后的

/*就是让hover这个变化效果按设置的时间慢慢的变化，形成一种动态的过渡效果*/

transiton的属性：

语法
transition: property duration timing-function delay;

  
  值 描述
transition-property 规定设置过渡效果的
 CSS 属性的名称。
transition-duration（必填的，就是过渡时间） 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration（必填的，就是过渡时间）	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

transition-property

设置变换的属性（width或height 等等）

transition-duration

（必填的，就是过渡时间）

transition-timing-function：

  
  linear 规定以相同速度开始至结束的过渡效果（等于
 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于
 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于
 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于
 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在
 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay:过渡效果开始前等待的时间

这些属性可以写在一个 transition 里面，也可以分开写;

例如：

transiton:width .5s ease-out 2s;

或

transition-property：width;

transition-duration:.5s;

transition-timing-function:ease-out;

transition-delay:2s;

\\

  
  box
 1 移动到右边：-webkit-transform:
 translate(3em,0);
box 2 顺时针旋转30度-webkit-transform:
 rotate(30deg);
box 3 移动到左下方：-webkit-transform:
 translate(-3em,1em);
box 4 尺寸放大两倍：-webkit-transform:
 scale(2);

<!DOCTYPE html>

<html>

<head>

<style>

div

   width:100px;

  height:100px;

     background-color: #eee;

    -webkit-transition: all 1s ease-in-out;

    -moz-transition: all 1s ease-in-out;

    -o-transition: all 1s ease-in-out;

    transition: all 1s ease-in-out;

div:hover

    background-color: #fc3;

    -webkit-transform:  scale(2);

    -moz-transform:  scale(2);

    -o-transform:  scale(2);

    -ms-transform:  scale(2);

    transform: ) scale(2);

</style>

</head>

<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>

submenu {
    background-color: #eee;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }
  #submenu:hover {
    background-color: #fc3;
    -webkit-transform: rotate(360deg) scale(2);
    -moz-transform: rotate(360deg) scale(2);
    -o-transform: rotate(360deg) scale(2);
    -ms-transform: rotate(360deg) scale(2);
    transform: rotate(360deg) scale(2);
  }

 ::-webkit-input-placeholder { /* WebKit browsers */

    color: #C77405;

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

    color: #C77405;

 ::-moz-placeholder { /* Mozilla Firefox 19+ */

    color: #C77405;

:-ms-input-placeholder { /* Internet Explorer 10+ */

    color: #C77405;

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

box 1	移动到右边：`-webkit-transform: translate(3em,0);`
box 2	顺时针旋转30度`-webkit-transform: rotate(30deg);`
box 3	移动到左下方：`-webkit-transform: translate(-3em,1em);`
box 4	尺寸放大两倍：`-webkit-transform: scale(2);`