css transitions

最新推荐文章于 2024-02-17 21:18:56 发布

weixin_34234823

最新推荐文章于 2024-02-17 21:18:56 发布

阅读量112

点赞数

原文链接：https://juejin.im/post/5c022d28e51d45090c49956c

版权

transitions

定义：transitions提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的

属性：

transition-property
transition-duration
transition-timing-function
transition-delay:

transition-property: 指定哪个或哪些 CSS 属性用于过渡,其值有以下几种：

none: 不设置任何属性用于过度动画
all: 设置所有属性用于过度动画 [IDENT]: 指定特定是属性一个或者多个比如transition-property：width, bacgroud;

可设置属性集合

transition-duration: 动画过度的时长，一个或者多个值 transition-duration： 2s,4s;

transition-timing-function: 指定一个函数，定义属性值怎么变化。常用的函数有下面几个

transition-delay: 属性延迟多长时间后进行变化但是如果设置成负值有什么区别呢？

补充

transitions还提供了一个当变换结束的事件 el.addEventListener("transitionend", updateTransition, true);

demo

实现一个缓慢翻页的动画

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		.div, img {
			width: 300px;
			height: 200px;
		}

		.div {
			position: relative;
		}

		.div::before {
			content: '';
			border-style: solid;
			position: absolute;
			top: 0;
			right: 0;
			width: 0;
			height: 0;
			border-width: 0; 
			z-index: 2;
			transition: all 1s ease-out;
		}

		.div:hover::before {
			border-right-width: 80px;
			border-bottom-width: 80px;
			border-right-color: rgba(255, 255, 255, 1);
			border-bottom-color: rgba(217, 217, 218, 0.8);
		}


	</style>
</head>
<body>
	<div class="div">
		<img src="./001.jpg"/>
	</div>
</body>
</html>
复制代码

转载于:https://juejin.im/post/5c022d28e51d45090c49956c

weixin_34234823

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css transitions

transitions定义：transitions提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的属性：transition-propertytransition-durationtransition-timing-functiontransition-delay:transition-property: 指定哪个...
复制链接

扫一扫