transition过渡的基本使用

1.简介

transition属性是css3中的一个重要属性，transition可以为一个元素在不同样式之间变化添加补间动画。我们只需要定义开始状态和结束状态，这样transition属性就可以为我们添加补间动画。相较于传统的js实现的动画，transition属性实现的动画效果更细腻而且内存开销小。

2.transition属性的基本使用

transition属性有4个基本要素，分别是要过度的属性，动画时长，动画演变速度，延迟时间。

3.哪些属性可以参与过渡

（1）所有数值属性都可以参与过度，比如width,height,left,top,border-radius
（2）背景颜色和文字颜色都可以过渡
（3）所有变形（包括2D和3D变换）都可以过渡

4.代码演示

（1）盒子宽度过渡

<!Doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {margin: 40px;width: 200px;height: 200px;background-color: orange;transition: width 1s linear 0s;}.box1:hover {width: 800px;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

（2）位置过渡

<!Doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box1 p {margin: 20px;width: 200px;height: 200px;background-color: orange;position: relative;left: 0px;}.box1:hover p {left: 600px;transition: left 5s linear 0s;}</style>
</head>
<body><div class="box1"><p></p></div>
</body>
</html>

（3）盒子颜色变化

<!Doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {margin: 20px;width: 200px;height: 200px;background-color: orange;}.box1:hover {transition: background-color 5s linear 0s;background-color: blue;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

（4）2D旋转过渡

<!Doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {margin: 100px;width: 200px;height: 200px;background-color: orange;}.box1:hover {transition: transform 2s linear 0s;transform: scale(1.2) rotate(360deg);}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

5.特殊用法

如果要所有属性都参与过渡，可以写all。例如：transition:all 1s linear 0s;

transition过渡的基本使用相关推荐

css3中transition过渡和animation动画的区别
css3中transition过渡和animation动画的区别 animation 多两个参数,循环和动画的方式 transition不能自行触发,通过hover等动作或结合JS进行触发.anmia ...
transition(过渡)
transition(过渡) transition是CSS3中具有特殊功能的特性之一,可以不使用flash动画或者JS计时器的情况下,当元素从一种样式变为另一种样式时为元素添加过渡效果. 浏览器支持情 ...
transition过渡的基本概念（逆战班）
通过 transition过渡,我们可以在不使用 Flash 动画或 JavaScript 的情况下,可以给元素从一种样式变换为另一种样式时为它添加效果.它的基本属性有以下几条: 第一:.transi ...
transition过渡
transition过渡定义和用法 transition用于设置四个过渡属性: 1.transition-property : 规定设置过渡效果的CSS属性的名称. all ( 默认值 ) , 指定 ...
css 实现动画的三种方式: transition 过渡、 transform 变形、 animation 关键帧动画
1.transition 过渡动画: 1. 语法:1. transition: 属性是个复合属性 .2. transition: property duration timing-function d ...
transition过渡动画的自述
Hi,大家好!我是transition,经常有小伙伴把我和隔壁animation搞混,下面我就好好的介绍一下自己,让大家能明白我到底是干啥的. 看看我身上的属性吧: 大家总是叫我transition, ...
css transition过渡
css过渡效果 transition设置过渡,transition的属性包括如下图: 属性描述 transition 简写属性,用于在一个属性中设置四个过渡属性. transition-proper ...
取消hover效果_CSS3 transition过渡动画效果
本章主要探讨 HTML5 中 CSS3 的过渡效果,通过这个功能可以不借助 JavaScript 来实现简单的用户交互功能. 一．过渡简介过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能, ...
Transition(过渡动画效果)
概览这个包中的类为view提供 scenes & transitions结构 Scenes是指一个封装的视图,包括视图层次结构和各种值(布局相关和其他),一个场景可以直接被定义为一个布局层 ...
19、前端开发：CSS知识总结——transition过渡属性
1.前言 transition 属性设置元素当过渡效果,四个简写属性为: transition-property 指定CSS属性的name,transition效果 ...