欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3动画属性之Transition

程序员文章站 2024-03-25 14:43:28
...

Transition 属性(过渡动画)

Transition 属性是可以让元素从一个状态转换成另一个状态,这就是过渡。

一、前言

之前有段时间总是混淆 transition 和 transform 属性的用法,这里有个方法,可供参考。 先说 transform,trans在英语词根中表示变化、运动,而 form 在英语词根中本身就是形状形式的意思,那就不难理解 transform 是让形状变化起来了,于是它就是形状变换。 至于 transition,去查一下它的英语解释就一目了然了。这里是必应词典的解释:

a process or period in which something undergoes a change and passes from one state, stage, form, or activity to another

简单点说,就是经历了从一个状态、阶段、形式转换到另一个状态的一个过程或者一段时间。那么这样一个**“需要时间来转换的过程”**,不就描述了“过渡”二字的含义吗?


二、庖丁解牛

语法: transiton: transiton-property transiton-duration transiton-timing-function transiton-delay;

2.1 transiton-property (特性)

transition-property:all | none | <property> [ ,<property> ]*

规定设置过渡效果的 CSS 属性的名称。

all 为默认值,表示所有可以呈现动效的属性都去产生过渡动画。

none 表示没有过渡动画。

下表是可以产生动效的一些CSS属性值:

CSS属性名称 类型
background-color color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number

2.2 transiton-duration (延续时间)

transition-duration:<time> [ , <time> ]*

规定完成过渡动画的延续时长。(单位为:秒或者毫秒)可以作用于所有元素,包括 :before 和 :after 伪元素。

默认值为 0,表示不产生过渡动效,而是即刻完成动画。

2.3 transiton-timing-function (速率变化函数)

transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]*

规定过渡效果的速度曲线,过渡属性将随着时间的变化来改变其速度。

  1. liner 匀速 cubic-bezier(0, 0, 1, 1)
  2. ease 平滑过渡 cubic-bezier(0.25, 0.1, 0.25, 1)
  3. ease-in 加速 cubic-bezier(0.42, 0, 1, 1)
  4. ease-out 减速 cubic-bezier(0, 0, 0.58, 1)
  5. ease-in-out 先加速后减速 cubic-bezier(0.42, 0, 0.58, 1)
  6. cubic-bezier(n, n, n, n) 自定义一个贝瑟尔曲线,取值范围 [0, 1]。贝瑟尔曲线是什么?

2.4 transiton-delay (延迟时间)

transition-delay:<time> [ , <time> ]*

规定过渡动画延迟发生的时间。(单位为:秒或者毫秒)可以作用于所有元素,包括 :before 和 :after 伪元素。

默认值为 0,表示过渡动效即刻执行,没有延迟。


三、小试牛刀

写了一个小 demo,感受一下过渡动画的魅力。

html代码:

<h1 style="text-align:center;">小试牛刀</h1>
<div class="container">
    <button class="btn">开始</button>
    <br> <br>
    <div class="box">过渡</div>
</div>
复制代码

css代码:

* {
    margin: 0;
    padding: 0;
}
.container {
    position: relative;
    left: 50%;
    top: 10px;
    transform: translate(-50%);
    width: 500px;
    height: 500px;
    border-radius: 20px;
    border: 3px solid salmon;
    overflow: hidden;
}
.box {
    margin-top: 30px;
    margin-left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 20px;
    border: 2px solid gold;
    background: #abcdef;
    line-height: 100px;
    text-align: center;
    font-size: 20px;
    /* 下面设置3个过渡动画 通过点击事件触发*/
    transition: transform 2s ease 0.5s, backgroundColor 2s linear, height 1.5s ease-in-out, width 1.5s ease-in-out;
}
.btn {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 10px);
    border-radius: 10px;
    border: 0;
    outline: 0;
    padding: 10px;
}
复制代码

js代码:

var oBtn = document.getElementsByClassName('btn')[0];
var oBox = document.getElementsByClassName('box')[0];

oBtn.onclick = function() {
    oBox.style.transform = 'translate(220px,220px) rotate(720deg)'
    oBox.style.backgroundColor = 'pink';
    oBox.style.width = '200px';
    oBox.style.height = '150px';
}
复制代码

上一篇: react

下一篇: 5.4.3 范围for语句