html&css系列学习——（六）过渡及动画

浅浅云烟

于 2022-09-01 20:09:43 发布

阅读量884

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qianqianyunyan/article/details/126649254

版权

一、过渡 transition(手动触发)

一、过渡 transition(手动触发)

1. 过渡触发方式

触发方法	描述
:hover{}	鼠标悬停时触发
:active{}	单击元素并按住鼠标时触发
:focus{}	获得焦点时触发
@media触发	符合媒体查询条件时触发
点击事件	点击元素时触发

2. 过渡要素

要素	描述	取值
transition-property	过渡属性	none
		all
		property
transition-duration	过渡持续时间	time(s),默认0
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) )
		steps(int,start\|end):参数：函数的间隔数,动画是从时间段的开头连续还是末尾连续
		cubic-bezier(n,n,n,n):自定义速度，n取0~1
transition-delay	过渡等待时长	time(s),默认0

3. 过渡连写

transition: 过渡属性过渡时长运动速度延迟时间;

<!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>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: orange;
            transition: width 1s linear 0s,height 2s linear 0s,background-color 2s linear 0s;
        }
        div:hover{width:200px;height:400px;background-color: orangered;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

二、动画 animation(自动执行)

1.动画属性

属性	描述	取值
animation-name	动画名称
animation-duration	动画持续时长	time,默认为0
animation-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) )
		steps(int,start\|end):参数：函数的间隔数,动画是从时间段的开头连续还是末尾连续
		cubic-bezier(n,n,n,n):自定义速度，n取0~1
animation-delay	动画等待时长	time(s)
animation-iteration-count:	动画播放次数	n n次
animation-iteration-count:	动画播放次数	infinite 无限次
animation-direction	动画是否反向播放	normal (默认),往返动画
animation-direction	动画是否反向播放	alternate 反向执行
animation-fill-mode	动画结束状态	none 不做任何改变
		forwards 让元素结束状态保持动画最后一帧的样式
		backwards 让元素等待状态的时候显示动画第一帧的样式
		both 让元素等待显示动画第一帧, 结束保持动画最后一帧
animation-play-state	动画是否暂停	running 继续
animation-play-state	动画是否暂停	paused 暂停

2.动画关键帧

格式：

@keyframs name{
        //开始 中间过程 结束状态
        0%{}
        25%{}
        50%{}
        100%{}
    }

3. 动画连写

animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);

<!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>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color:pink;
			animation: leftToRight 1s linear 0s infinite alternate forwards;
		}
		div:hover{
			/* 设置动画是否暂停 paused暂停*/
			animation-play-state: paused;
		}
		/* 动画关键帧 */
		@keyframes leftToRight {
			0%{
				height: 100px;
                width: 100px;
			}
			25%{
				height: 150px;
                width: 120px;
			}
			50%{
				height: 250px;
                width: 150px;
			}
			100%{
				height: 400px;
                width: 200px;
			}
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

4.动画引入

引入css动画样式：Animate.css | A cross-browser library of CSS animations.

<!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>Document</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body>
	<h1 class="animate__animated animate__bounce">An animated element</h1>
	<h1 class="animate__animated animate__wobble">An animated element</h1>
	<h1 class="animate__animated animate__backInRight">An animated element</h1>
	<h1 class="animate__animated animate__bounceIn">An animated element</h1>

</body>
</html>