Css过渡动画 2D3D变化

最新推荐文章于 2024-01-28 22:32:39 发布

sereasuesue

最新推荐文章于 2024-01-28 22:32:39 发布

阅读量262

点赞数 1

分类专栏： css js web前端学习文章标签： css过渡笔记

本文链接：https://blog.csdn.net/sereasuesue/article/details/83312903

版权

web前端学习同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

css js

25 篇文章 1 订阅

订阅专栏

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间。

注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css过渡</title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	transition-property:width;/*设置元素的属性全部都发生过渡效果*/
	transition-duration:1s;/*设置元素过渡效果的时间*/
	transition-timing-function:linear;/*设置元素匀速动画效果*/
	transition-delay:2s;/*设置元素产生过渡效果的延迟等待*/
	/*简写*/
	transition:width 1s 2s linear 2s;;
	/* Safari */
	-webkit-transition-property:width;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:2s;
}

div:hover
{
	width:200px;
}
</style>
</head>
<body>

<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>



<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>

</body>
</html>

CSS 2D3D转换

CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

sereasuesue

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Css过渡动画 2D3D变化

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。注意：如果未指定的期限，transition将没有任何效果，因为默认值是0。<!DOCTYPE html><html><head><meta charset="utf-8"> <t...
复制链接

扫一扫