CSS3-过渡动画（transition & animation)

最新推荐文章于 2023-10-16 17:00:25 发布

MelanceXin

最新推荐文章于 2023-10-16 17:00:25 发布

阅读量962

点赞数 1

分类专栏： HTML+CSS+JS ASP.NET 文章标签： CSS3 transition animation 过渡动画

本文链接：https://blog.csdn.net/Q672405097/article/details/89553472

版权

ASP.NET 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML+CSS+JS

15 篇文章 0 订阅

订阅专栏

目前在CSS3中使用动画效果有两种途径：
transition 和 animation

1.transition
主要属性：
transition-delay 过渡动画延迟时间
transition-duration 过渡动画持续时间
transition-timing-function:linar 过渡变化曲线图

实例：

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin TransitionCSS_Test</title>
    <style type="text/css">
        p{
            width:100px;
            height:100px;
            background-color:antiquewhite;	
        }
        p:hover{				
            /* 指定动作 */
            width:200px;
            height:200px;
            background-color: #50f06a;
            transition-delay: 200ms;					
            /* CSS3.0新增属性， 过渡效果-延时 */
            transition-duration:500ms;				
             /* 过渡效果-变化过程持续时间  （目前几乎新版的浏览器的都支持，但考虑到用户可能会使用老版本的浏览器，建议使用带上前标的transition） */
              /* -webkit-transition-duration:500ms;	   */
             /* -webkit- 表示适用于 Google 和 safari 浏览器 */
             /* -o-transition-duration:500ms;			 */
              /* -o- 表示 opera 浏览器 */
             /* -moz-transition-duration:500ms;			 */
             /* -moz- 表示 火狐浏览器 */
             transition-property:background-color,width,height; 		
             /* 表示需要进行过渡效果的属性 */
             transition-timing-function:linar ;   
              /* 属性值linar,ease ,ease-in ,ease-out,ease-in-out   分别对应贝塞尔曲线不同的曲线变化效果  */
        }
</style>
</head>

<body>

    <body>
           <p></p>
    </body>
</body>

</html>

实现效果图：
在这里插入图片描述

2.animation
主要属性：
animation-duration 一次动画从开始到结束持续多长时间
animation-delay 延迟多少时间开始动画
animation-name 动画名
animation-iteration-count 设置动画播放次数，属性值为 infinite 表示无限次重复播放该动画
animation-direction: alternate 设置动画播放方式，属性值为 alternate 表示animation正反向交替运行
etc…

实例：（变大缩小动画 to…from ）

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin AnimationCSS_Test</title>
    <style type="text/css">
        p {
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
        p:hover {
            /* 指定动作 */
            animation-duration: 1000ms;
            animation-delay: 200ms;
            animation-name: MelanceXin;
            /* 这里MelanceXin为动画名 */
            animation-iteration-count: infinite;
            /* 属性值为 infinite 表示无限次重复播放该动画 */
            animation-direction: alternate;
            /* 属性值为 alternate 表示animation正反向交替运行 */
        }

        @keyframes MelanceXin
        /* 定义对应动画名的动画 */
            {
            to {
                width: 200px;
                height: 200px;
                background-color: #ffad2a;
            }

            from {
                width: 100px;
                height: 100px;
                background-color: #40a1ce;
            }
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

实现效果图：

在这里插入图片描述

实例2：（在animation 中设立多个断点）

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin AnimationCSS_Test</title>
    <style type="text/css">
        p{
					width:100px;
					height:100px;
					background-color:antiquewhite;	
				}
				p:hover{				
                    /* 指定动作 */
					animation-duration:2000ms;
					animation-delay:200ms;
					animation-name:MelanceXin;	  
                    /* 这里MelanceXin为动画名 */
					animation-iteration-count:2;  	
                    /* 属性值为 1. infinite 表示无限次重复播放该动画    2.数字，表示重复的次数 */
					animation-direction:alternate;   
                      /* 属性值为 alternate 表示animation正反向交替运行 */
				}
				@keyframes MelanceXin			
                /* 定义对应动画名的动画 */
				{
				from{
						width:100px;
						height:100px;
						background-color:#fffec3;
						}
				
					50%{
						width:120px;
						height:200px;
						background-color:#3b88ff;
						}
					75%{
						width:200px;
						height:120px;
						background-color:#7fe444;
						}
					to{
						width:200px;
						height:200px;
						background-color:#ffad2a;
						}
				}
    </style>
</head>

<body>
    <p></p>
</body>

</html>

实现效果图：
在这里插入图片描述

动画和过渡效果的区别：
1.动画必须完整整次，如果是执行一次，结束时会回到最初始状态。
2.过渡动画则不用，过渡效果结束时会停在设定的状态上。
3.动画效果使用比较复杂，需要用到一个名为animation-name的属性

MelanceXin

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3-过渡动画（transition & animation)

目前在CSS3中使用动画效果有两种途径：transition和animation1.transition主要属性：transition-delay 过渡动画延迟时间transition-duration 过渡动画持续时间transition-timing-function:linar 过渡变化曲线图实例：<!DOCTYPE html><html>&lt...
复制链接

扫一扫