CSS3动画实例-CSDN博客

本文提供了一个使用CSS3实现动画效果的具体实例，展示了如何通过关键帧动画改变元素的位置、旋转角度及背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="gb2312" />
<meta name="robots" content="all" />

<style>
#animated_div
   {
   width:100px;
   height:17px;
   background:#92B901;
   color:#ffffff;
   position:relative;
   font-weight:bold;
   font:bold 12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
   padding:10px;
   animation:animated_div 5s 1s infinite running;
   -moz-animation:animated_div 5s 1;
   -webkit-animation:animated_div 5s 1;
   -o-animation:animated_div 5s 1;
   border-radius:5px;
   -webkit-border-radius:5px;
   -webkit-animation-play-state: running;
   -webkit-animation-iteration-count: infinite;
   }

@keyframes animated_div
   {
   0%       {transform: rotate(0deg);left:0px;}
   25%       {transform: rotate(20deg);left:0px;}
   50%       {transform: rotate(0deg);left:300px;}
   55%       {transform: rotate(0deg);left:300px;}
   70%       {transform: rotate(0deg);left:300px;background:#1ec7e6;}
   100%   {transform: rotate(-360deg);left:0px;}
   }

@-webkit-keyframes animated_div
   {
   0%       {-webkit-transform: rotate(0deg);left:0px;}
   25%       {-webkit-transform: rotate(20deg);left:0px;}
   50%       {-webkit-transform: rotate(0deg);left:300px;}
   55%       {-webkit-transform: rotate(0deg);left:300px;}
   70%       {-webkit-transform: rotate(0deg);left:300px;background:#1ec7e6;}
   100%   {-webkit-transform: rotate(-360deg);left:0px;}
   }

@-moz-keyframes animated_div
   {
   0%   {-moz-transform: rotate(0deg);left:0px;}
   25% {-moz-transform: rotate(20deg);left:0px;}
   50% {-moz-transform: rotate(0deg);left:300px;}
   55% {-moz-transform: rotate(0deg);left:300px;}
   70% {-moz-transform: rotate(0deg);left:300px;background:#1ec7e6;}
   100% {-moz-transform: rotate(-360deg);left:0px;}
   }

@-o-keyframes animated_div
   {
   0%   {transform: rotate(0deg);left:0px;}
   25% {transform: rotate(20deg);left:0px;}
   50% {transform: rotate(0deg);left:300px;}
   55% {transform: rotate(0deg);left:300px;}
   70% {transform: rotate(0deg);left:300px;background:#1ec7e6;}
   100% {transform: rotate(-360deg);left:0px;}
   }
</style>

<title>CSS3 动画</title>

</head>

<body class="html">

<div>
<p id="animated_div">选择规格分享减价</p>
</div>

</body>

</html>

css3 动画