过渡

介绍

CSS transittions是一种更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效。而要实现这一点，就必须满足如下两项内容：
（1）指定要添加效果的CSS属性
（2）指定效果的持续时间

过渡的三要素：
（1）必须要有属性发生变化
（2）必须告诉系统那个属性需要执行过渡效果
（3）必须告诉系统过渡的持续时长

触发过渡的方式：
1、:hover鼠标悬停触发
2、:active用户单击元素并按住鼠标时触发
3、:focus获得焦点时触发
4、@media触发，符合媒体查询条件时触发
5、点击事件，用户点击元素时触发

常用属性

transition-property

作用：规定应用过渡的CSS属性的名称（哪个属性发生变化）
取值：
（1）none 没有属性会获得过渡效果
（2）all，所有属性豆浆获得过渡效果
（3）property，定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-duration

作用：定义过渡效果花费的时间。默认是 0。
取值：time，规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果

transition-timing-function

作用：规定过渡效果的时间曲线。默认是 “ease”。
取值：
（1）linear，对顶以相同速度开始至结束的过渡效果（匀速变）。
（2）ease，规定慢速开始，然后变快，然后慢速结束的过渡效果。
（3）ease-in，规定慢速开始的过渡效果
（4）ease-out，规定以慢速结束的过渡效果。
（5）ease-in-out，规定以慢速开始和结束的过渡效果。
（6）cubic-bezier（n,n,n,n）,在cubic-bezier 函数中定义自己的值。可取的值是 0 至 1 之间的数值。

transition-delay

作用：规定过渡效果何时开始。默认是 0
取值：time 指定秒或毫秒数之前要等待切换效果开始

注意点：
当多个属性需要同时执行过渡效果时用逗号隔开即可，例如：
transition-property: width, background-color;
transition-duration: 5s, 5s;
transition 是 transition-property， transition-duration，transition-timing-function的速写形式

连写格式：
transition: 过渡属性过渡时长运动速度延迟时间;
例如：transition: width 5s linear 0s,background-color 5s linear 0s;

注意点：
如果想给多个属性添加过渡效果也是用逗号隔开即可
如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
transition:all 0s;

实例练习1：
实现如下的动画：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>transition测试</title><style>div{width: 100px;height: 100px;background-color: #ff0000;transition-property: width, background-color;transition-duration: 5s,5s;transition-timing-function: linear;}img{width: 300px;transition: width 5s linear;}div:hover{width:400px;background-color: #00ff00;}img:hover{width:500px;}</style>
</head>
<body><!-- 需求：鼠标移入时1、div变宽，颜色由红色变蓝色2、图片放大--><div></div><img src="../images/ad8.jpg" alt="">
</body>
</html>

实例练习2：
实现如下的动画：时间曲线动画

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>时间曲线动画</title><style>*{margin: 0;padding: 0;list-style: none;}ul{width: 600px;height: 600px;border: 1px solid red;margin:50px auto;}li{width: 100px;height: 50px;background-color: aqua;margin:50px 0;}/* 匀速 */ul li:first-child{transition: margin-left 5s linear;}/* 慢快慢 */ul li:nth-child(2){transition:margin-left 5s ease;}/* 开始慢逐渐快 */ul li:nth-child(3){transition: margin-left 5s ease-in;}/* 结束慢 */ul li:nth-child(4){transition: margin-left 5s ease-out;}/* 开始慢，结束慢 */ul li:last-child{transition:margin-left 5s ease-in-out;}ul:hover li{margin-left:600px}</style>
</head>
<body><ul><li>linear</li><li>ease</li><li>ease-in</li><li>ease-out</li><li>ease-in-out</li></ul></body>
</html>

实例练习3：
实现如下的动画：文字放大

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字放大</title><style>div{height:200px;background-color: rgb(97, 9, 155);margin-top: 100px;text-align: center;}div span{line-height: 200px;font-size: 30px;transition:font-size 5s linear;}div:hover span{font-size: 150px;}/*第二种方式*//* div span:hover{font-size:150px;} */</style>
</head>
<body><div><span>清</span><span>华</span><span>大</span><span>学</span></div>
</body>
</html>

实例练习4：
实现如下的动画：手风琴相册

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手风琴相册</title><style>*{margin:0;padding:0;list-style:none;}ul{width: 900px;height: 300px;border: 1px solid;background-color: black;margin: 50px auto;}ul li{width: 150px;height: 300px;float: left;overflow: hidden;transition: width 1s ease;}ul:hover li{width:100px;}ul li:hover{width: 400px;}</style>
</head>
<body><ul><li><img src="../images/ad7.jpeg" alt=""></li><li><img src="../images/ad8.jpg" alt=""></li><li><img src="../images/ad9.jpeg" alt=""></li><li><img src="../images/ad10.jpg" alt=""></li><li><img src="../images/ad11.jpg" alt=""></li><li><img src="../images/ad12.jpg" alt=""></li></ul>
</body>
</html>

CSS初入门：过渡-Transitions相关推荐

CSS初入门：设置子元素水平居中的方式
问题描述: 用几种方式实现元素位于父元素的水平居中位置,如图: 解决方式一通过控制子元素的左边框和右边框来达到居中的效果. 在那之前,我先举个我遇到过的错误示范 <!DOCTYPE html ...
html+css布局实例：CSS过渡-Transitions手风琴效果之鼠标位置的图片自动移动
效果图: 小伙伴们需要对CSS过渡-Transitions和前面的基础知识有一定了解你可以拿你自己的图片放进去: 小伙伴们我没有截取动图的软件,不能给你们看动图啦鼠标没有点击之前: 鼠标点击图片 ...
html+css布局实例：CSS过渡-Transitions文字逐渐变大的效果
CSS过渡-Transitions文字逐渐变大的效果图: 小伙伴们我没有截取动图的软件,不能给你们看文字逐渐放大的动图啦鼠标点击前: 鼠标点击后: 有两种代码,两种变大方式: 第一种: 动态效果展 ...
CSS简单入门（一）
CSS简单入门(一) CSS是什么 CSS怎么用 CSS选择器(重点+难点) 美化网页(文字,阴影,超链接.列表.渐变-) 盒子模型浮动定位网页定位(特效效果) 1.CSS是什么 1.1 什么是 ...
【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位
目标了解掌握CSS值和单位了解掌握CSS文字排版了解掌握CSS变换,过渡,动画了解掌握CSS定位 CSS的值和单位 https://developer.mozilla.org/zh-CN/do ...
JAVASCRIPT---CSS过渡-Transitions
CSS过渡-Transitions CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法. 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的.比如,将一个元素的颜 ...
学python有哪些用途-初入门学习python有哪些用途?
python是人工智能的重要编程语言,无论发展前景还是就业方向,不可限量.更重要的是python还是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言.那么初入门学习python有哪些用途呢 ...
CSS Modules入门教程
为什么引入CSS Modules 或者可以这么说,CSS Modules为我们解决了什么痛点.针对以往我写网页样式的经验,具体来说可以归纳为以下几点: 全局样式冲突过程是这样的:你现在有两个模块,分 ...
1_RabbitMQ初入门入门Hello消费者+生产者
文章目录 1_RabbitMQ初入门 1.RabbitMQ的介绍 1.工作原理&发送/接收消息的流程 2. 为什么要使用消息队列? 3.使用了消息队列有什么缺点? 2.安装RabbitMQ 3 ...

CSS初入门：过渡-Transitions

过渡

介绍