css3动画2种区分

原创 2015年07月06日 23:40:53
  1. transform:元素转换效果。包含移动、旋转、缩放、变形。一般用于:hover事件。
    这里写图片描述
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>

效果如下:
这里写图片描述
2. transition:过渡效果。一定程度代替Flash和js,在元素的样式发生变化时生效。定义生效的属性和过渡时间。
这里写图片描述

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>
<div>请把鼠标指针放到黄色的 div 元素上,来查看过渡效果。</div>
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

效果如下:
这里写图片描述

transition定义于初始元素样式上始终生效,transform(动作)则定义于变化后的样式中。

3.animation动画。使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
自定义动画使用@keyframes myanimation{}
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

@keyframes myanimation
{
from {background: red;}//from等效0%
to {background: yellow;}//to等效100%
}
<!DOCTYPE html>
<html>
<head>
<style> 
div
    {
    width:60px;
    height:40px;
    background:#92B901;
    color:#ffffff;
    position:relative;
    font-weight:bold;
    font:bold 12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
    padding:20px 10px 0px 10px;
    animation:animated_div 5s 1;
    -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;
    }

@keyframes animated_div
    {
    0%      {transform: rotate(0deg);left:0px;}
    25%     {transform: rotate(20deg);left:0px;}
    50%     {transform: rotate(0deg);left:500px;}
    55%     {transform: rotate(0deg);left:500px;}
    70%     {transform: rotate(0deg);left:500px;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:500px;}
    55%     {-webkit-transform: rotate(0deg);left:500px;}
    70%     {-webkit-transform: rotate(0deg);left:500px;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:500px;}
    55%  {-moz-transform: rotate(0deg);left:500px;}
    70%  {-moz-transform: rotate(0deg);left:500px;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:500px;}
    55%  {transform: rotate(0deg);left:500px;}
    70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100% {transform: rotate(-360deg);left:0px;}
    }
</style>
</style>
</head>
<body>
<div></div>
<p><b>注释:</b>当动画完成时,会变回初始的样式。</p>
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

css3,可以为一个元素添加多个动画

例如: .screen3.on .text5 {   animation: 1.4s 3s ease-out forwards show, 1.6s 4.4s ease forwards text...

css3中创建动画的三种方式详解

1、介绍了css3中三种动画创建的方式; 2、利用JQuery中的Deferred对象编写链式动画。...

css3动画效果

  • 2017年12月13日 13:52
  • 11.76MB
  • 下载

如何使用css3绘制任意角度扇形+动画

本文参考自: http://jingyan.baidu.com/article/c910274be4dd69cd371d2d48.html 这里只是做下原理解释 原理:使用两个半圆做角度拼接。 ...
  • broust
  • broust
  • 2015年12月04日 16:21
  • 7265

CSS3自行车动画特效

  • 2017年10月31日 16:25
  • 4KB
  • 下载

27个精致的CSS3动画效果

  • 2017年08月23日 09:08
  • 62.53MB
  • 下载

CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对...

好玩的css3动画效果

  • 2017年08月22日 00:33
  • 6KB
  • 下载

CSS3日食示意图动画

  • 2017年08月23日 12:47
  • 1KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3动画2种区分
举报原因:
原因补充:

(最多只允许输入30个字)