css3动画实例

最新推荐文章于 2024-08-25 01:17:37 发布

Amy梦想的翅膀

最新推荐文章于 2024-08-25 01:17:37 发布

阅读量652

点赞数 1

分类专栏： css3 文章标签： css3动画

本文链接：https://blog.csdn.net/sinat_23266313/article/details/82869279

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css3@keyframes规则

在 CSS3 中创建动画，需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
@keyframes是定义动画的（定义动画的样式），例：@keyframes animatname{} ，此动画的名称是animatname。

浏览器支持问题

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。

什么是 CSS3 中的动画？

动画基本原理是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

语法

@keyframes animationname {keyframes-selector {css-styles;}}
animationname ：必需，动画的名称
keyframes-selector：必需，动画时长的百分比
合法的值：0-100%， from（与 0% 相同），to（与 100% 相同）
css-styles：必需，一个或多个合法的 CSS 样式属性

实例

当动画为0%, 25% 及,50%,100% 时改变背景色和位置：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>

animation定义及用法

animation 属性是一个简写属性，用于设置六个动画属性：
animation-name：规定需要绑定到选择器的 keyframe 名称
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。默认是0
animation-timing-function：规定动画的速度曲线默认是 “ease”。
animation-delay：规定在动画开始之前的延迟。默认是 0。
animation-iteration-count：规定动画应该播放的次数，默认是 1。
animation-direction：规定是否应该轮流反向播放动画。

另：animation-play-state：规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode：规定对象动画时间之外的状态。

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

实例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>