html5中css3新添加的动画效果

来源：互联网发布：合同翻译的软件编辑：程序博客网时间：2024/04/30 00:34

字css3中，动画着重要说的就是：transition属性，表示过渡

（1）

如何定义一个动画：

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

<!DOCTYPE html><html><head><style> div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s;//为这个div附加一个动画 名字为myfirst-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>注释：<div></div></b>本例在 Internet Explorer 中无效。</p></body></html>

如何创建一个过渡

<!DOCTYPE html><html><head><style> div{width:100px;height:100px;background:yellow;transition-property:width;transition-duration:1s;transition-timing-function:linear;transition-delay:2s;/* Firefox 4 */-moz-transition-property:width;-moz-transition-duration:1s;-moz-transition-timing-function:linear;-moz-transition-delay:2s;/* Safari and Chrome */-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;/* Opera */-o-transition-property:width;-o-transition-duration:1s;-o-transition-timing-function:linear;-o-transition-delay:2s;}div:hover{width:200px;}</style></head><body><div></div><p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p><p><b>注释：</b>本例在 Internet Explorer 中无效。</p><p><b>注释：</b>这个过渡效果会在开始之前等待两秒。</p></body></html>

0 0