前端开发_HTML5_CSS部分-动画特效(animation)

最新推荐文章于 2024-03-30 01:25:31 发布

魔笛手7

最新推荐文章于 2024-03-30 01:25:31 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： css 动画 html5 animation

本文链接：https://blog.csdn.net/u013185175/article/details/122028383

版权

前端专栏收录该内容

75 篇文章 8 订阅

订阅专栏

动画特效(animation)

1.引入

我们之前学习了过渡的特效，那么接下来我们一起来学习一下另一种比较特殊的特效动画。

2.动画特效(animation)

(1)、概述:CSS 可使用animation实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！

(2)、动画animation相关的语法和参数说明

要实现一个动画的效果，需要实现两个步骤，如下:

①:使用@keyframes规则创建一个动画，用于定义相关的动画的属性，语法如下:

使用@keyframes规则创建一个动画其语法有以下两种方式:

@keyframes 名称{

   form { 
       设置起始的样式属性
   }
   to {

      设置结束的样式属性
   }
}

------------------------------------------------
@keyframes 名称{

   0%{ 
       设置起始的样式属性
   }
   50%{

      设置中间的样式属性
   }
   100%{

      设置结束的样式属性
   }
}

②:使用关键字animation以及相关的属性调用@keyframes定义的名称实现动画

animation相关的语法以及参数说明

语法:
animation:名称 持续时间 动画速度 延迟时间  播放次数


参数说明:

animation-delay:该参数用于指定延迟时间，是指动画开始之前的延迟时间。

animation-direction:指定播放循环的时间和是否反向播放过渡的持续时间，参数值为:normal或alternate

animation-duration:指定动画播放的持续时间

animation-iteration-count:指定动画的播放次数，可以使用关键字infinite(无数)或数值。

animation-name:这一个参数用于指定之前@keyframes所指定的参数，指的是动画的名称。

animation-timing-function：指定过渡效果的变化速度。其指主要有以下几个:
                   ease:默认值，从慢速开始，然后开始加速，然后再以慢速结尾的过渡方式。
                 linear:从始至终以相同的速度结束的过渡效果。
                ease-in:以慢速开始的过渡效果
               ease-out:以慢速结束的过渡效果
            ease-in-out:以慢速开始、慢速结束的过渡效果

animation:复合属性，整个动画的简写

(3)、动画animation相关代码实现以及实现效果

<style type="text/css">
			.box {
				width: 200px;
				height: 150px;
				border: 1px solid red;
				background-color: #00dc00;
				box-shadow: 0px 0px 20px #008000;
				color: #ffff00;
			}
            
			<!--声明帧组:这里就只设置颜色变化了-->
			@keyframes text-anim{
				0%{
					background-color: #0000FF;
				}
				50%{
					background-color: #ff0000;					
				}
				100%{
					background-color: #aa00ff;
					color: #55aaff;	
					width: 100px;
					height: 75px;
					border: 1px solid black;
				}
		    }
			

			<!--设置动画的相关属性-->
			.box:hover{
				/* animation-delay: 100ms;
				animation-duration: 1500ms;
				animation-direction: alternate;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
				animation-name: demoTest; */
				animation: text-anim 1500ms linear 100ms alternate infinite;
			}
</style>

<body>
   <div class="box">
	  动画相关效果实现
   </div>
</body>

魔笛手7

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发_HTML5_CSS部分-动画特效(animation)

动画特效(animation)1.引入我们之前学习了过渡的特效，那么接下来我们一起来学习一下另一种比较特殊的特效动画。2.动画特效(animation)(1)、概述:CSS 可使用animation实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！(2)、动画animation相关的语法和参数说明要实现一个动画的效果，需要实现两个步骤，如下: ①:使用@keyframes规则创建一个动画，用于定义相关的动画的属性，语法如...
复制链接

扫一扫