美文网首页
CSS3 动画

CSS3 动画

作者: maskerII | 来源:发表于2019-05-12 14:34 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 动画</title>
    <style>
        div.ex1{
            width: 100px;
            height: 100px;
            background: red;
            animation: myfirst 5s;
            -webkit-transition: myfirst 5s;
        }

        @keyframes myfirst {
            from{background: red}
            to{background: yellow}

        }

        @-webkit-keyframes myfirst {
            from{background: red}
            to{background: yellow}
        }


        div.ex2{
            width: 100px;
            height: 100px;
            background: red;
            animation: myfirst2 5s;
            -webkit-transition: myfirst2 5s;
            -moz-animation: myfirst2 5s;
            -o-animation: myfirst2 5s;
        }

        @keyframes myfirst2 {
            0%{background: red;}
            25%{background: yellow;}
            50%{background: blue;}
            100%{background: green;}
        }

        @-webkit-keyframes myfirst2 {
            0%{background: red;}
            25%{background: yellow;}
            50%{background: blue;}
            100%{background: green;}
        }

        @-moz-keyframes myfirst2 {
            0%{background: red;}
            25%{background: yellow;}
            50%{background: blue;}
            100%{background: green;}
        }

        @-o-keyframes myfirst2 {
            0%{background: red;}
            25%{background: yellow;}
            50%{background: blue;}
            100%{background: green;}
        }

        div.ex3{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst3 5s;
            -webkit-animation: myfirst3 5s;
        }


        @keyframes myfirst3 {
            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 myfirst3 {
            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;}
        }


        div.ex4{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation-name: myfirst4;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-play-state: running;

            -webkit-animation-name: myfirst4;
            -webkit-animation-duration: 5s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-delay: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-play-state: running;
        }

        @keyframes myfirst4
        {
            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 myfirst4 /* 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;}
        }

        div.ex5{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst5 5s linear 2s infinite alternate;
            -webkit-animation: myfirst5 5s linear 2s infinite alternate;
            -o-animation: myfirst5 5s linear 2s infinite alternate;
        }

        @keyframes myfirst5
        {
            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 myfirst5 /* 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 myfirst5 /* 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 myfirst5 /* 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;}
        }




        /* CSS 绘制太阳系各个行星运行轨迹 */
        .solarsys{
            width: 800px;
            height: 800px;;
            position: relative;
            margin: 0 auto;
            background-color: #000000;
            padding: 0;
            transform: scale(1);
        }

        /*太阳*/
        .sun {
            left:357px;
            top:357px;
            height: 90px;
            width: 90px;
            background-color: rgb(248,107,35);
            border-radius: 50%;
            box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
            position: absolute;
            margin: 0;
        }

        /*水星*/
        .mercury {
            left:337.5px;
            top:395px;
            height: 10px;
            width: 10px;
            background-color: rgb(166,138,56);
            border-radius: 50%;
            position: absolute;
            transform-origin: 62.5px 5px;
            animation: rotate 1.5s infinite linear;
        }

        /*水星轨道*/
        .mercuryOrbit {
            left:342.5px;
            top:342.5px;
            height: 115px;
            width: 115px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            margin: 0px;
            padding: 0px;
        }

        /*金星*/
        .venus {
            left:309px;
            top:389px;
            height: 22px;
            width: 22px;
            background-color: rgb(246,157,97);
            border-radius: 50%;
            position: absolute;
            transform-origin: 91px 11px;
            animation: rotate 3.84s infinite linear;
        }

        /*金星轨道*/
        .venusOrbit {
            left:320px;
            top:320px;
            height: 160px;
            width: 160px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }

        /*地球*/
        .earth {
            left:266.5px;
            top:391px;
            height: 18px;
            width: 18px;
            background-color: rgb(115,114,174);
            border-radius: 50%;
            position: absolute;
            transform-origin: 134px 9px;
            animation: rotate 6.25s infinite linear;
        }

        /*地球轨道*/
        .earthOrbit {
            left:275px;
            top:275px;
            height: 250px;
            width: 250px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }

        /*火星*/
        .mars {
            left:222.5px;
            top:392.5px;
            height: 15px;
            width: 15px;
            background-color: rgb(140,119,63);
            border-radius: 50%;
            position: absolute;
            transform-origin: 177.5px 7.5px;
            animation: rotate 11.75s infinite linear;
        }

        /*火星轨道*/
        .marsOrbit {
            left:230px;
            top:230px;
            height: 340px;
            width: 340px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }

        /*木星*/
        .jupiter {
            left:134px;
            top:379px;
            height: 42px;
            width: 42px;
            background-color: rgb(156,164,143);
            border-radius: 50%;
            position: absolute;
            transform-origin: 266px 21px;
            animation: rotate 74.04s infinite linear;
        }

        /*木星轨道*/
        .jupiterOrbit {
            left:155px;
            top:155px;
            height: 490px;
            width: 490px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }

        /*土星*/
        .saturn {
            left:92px;
            top:387px;
            height: 26px;
            width: 26px;
            background-color: rgb(215,171,68);
            border-radius: 50%;
            position: absolute;
            transform-origin: 308px 13px;
            animation: rotate 183.92s infinite linear;
        }

        /*土星轨道*/
        .saturnOrbit {
            left:105px;
            top:105px;
            height: 590px;
            width: 590px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }

        /*天王星*/
        .uranus {
            left:41.5px;
            top:386.5px;
            height: 27px;
            width: 27px;
            background-color: rgb(164,192,206);
            border-radius: 50%;
            position: absolute;
            transform-origin: 358.5px 13.5px;
            animation: rotate 524.46s infinite linear;
        }

        /*天王星轨道*/
        .uranusOrbit {
            left:55px;
            top:55px;
            height: 690px;
            width: 690px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }

        /*海王星*/
        .neptune {
            left:10px;
            top:390px;
            height: 20px;
            width: 20px;
            background-color: rgb(133,136,180);
            border-radius: 50%;
            position: absolute;
            transform-origin: 390px 10px;
            animation: rotate 1028.76s infinite linear;
        }

        /*海王星轨道*/
        .neptuneOrbit {
            left:20px;
            top:20px;
            height: 760px;
            width: 760px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }

        @keyframes rotate {
            100% {
                transform: rotate(-360deg);
            }
        }


    </style>
</head>
<body>
<h2>CSS3 动画</h2>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div class="ex1"></div>


<h2>CSS3 动画2</h2>

<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div class="ex2"></div>

<h2>CSS3 动画3</h2>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div class="ex3"></div>


<h2>CSS3 动画4</h2>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div class="ex4"></div>

<h2>CSS3 动画5</h2>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div class="ex5"></div>

<h2>CSS 绘制太阳系各个行星运行轨迹</h2>
<div class="solarsys">
    <!--太阳-->
    <div class='sun'></div>

    <!--水星轨道-->
    <div class='mercuryOrbit'></div>

    <!--水星-->
    <div class='mercury'></div>

    <!--金星轨道-->
    <div class='venusOrbit'></div>

    <!--金星-->
    <div class='venus'></div>

    <!--地球轨道-->
    <div class='earthOrbit'></div>

    <!--地球-->
    <div class='earth'></div>

    <!--火星轨道-->
    <div class='marsOrbit'></div>

    <!--火星-->
    <div class='mars'></div>

    <!--木星轨道-->
    <div class='jupiterOrbit'></div>

    <!--木星-->
    <div class='jupiter'></div>

    <!--土星轨道-->
    <div class='saturnOrbit'></div>

    <!--土星-->
    <div class='saturn'></div>

    <!--天王星轨道-->
    <div class='uranusOrbit'></div>

    <!--天王星-->
    <div class='uranus'></div>

    <!--海王星轨道-->
    <div class='neptuneOrbit'></div>

    <!--海王星-->
    <div class='neptune'></div>
</div>

</body>
</html>

CSS3 动画
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。

CSS3 @keyframes 规则
要创建CSS3动画，你将不得不了解@keyframes规则。

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

1、浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性           Chrome                  IE             Firefox              Safari               Opera
@keyframes     43.0                    10.0           16.0                 9.0                  30.0
               4.0 -webkit-                           5.0 -moz-            4.0 -webkit-         15.0 -webkit-
                                                                                                12.0 -o-

animation      43.0                    10.0           16.0                 9.0                  30.0
               4.0 -webkit-                           5.0 -moz-            4.0 -webkit-         15.0 -webkit-
                                                                                                12.0 -o-

实例

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
2、CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长
OperaSafariChromeFirefoxInternet Explorer
实例
把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

3、CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

OperaSafariChromeFirefoxInternet Explorer
实例
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

实例
改变背景色和位置：

@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;}
}

@-webkit-keyframes myfirst /* Safari 与 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;}
}
4、CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3

5、下面两个例子设置所有动画属性：

实例
运行myfirst动画，设置所有的属性：

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

实例
与上面的动画相同，但是使用了简写的动画 animation 属性：

div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

相关文章

  • 网页高级知识点（三）

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • 07day

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

  • 08_dayCSS动画

    CSS3新增的功能有：过渡和动画，阴影和圆角 css3过渡动画： css3都有哪些新增的东西 : 过度，动画，阴影...

  • CSS3 动画

    CSS3 动画CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。 ...

  • CSS3 动画

    动画属性 动画（animation）是CSS3新增的属性，动画属性可以为元素创建动画，CSS3以前在网页上实现动画...

  • css3动画

    css3动画 CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的...

  • 纯CSS3绘制的逼真，呆萌，超酷的CSS3动画

    纯CSS3人物行走动画 逼真炫酷CSS3动画 CSS3实在是太强大了，今天分享的CSS3动画非常神奇，它可以模拟人...

  • 关于js动画和css3动画的差异性你了解吗？请简单谈一下

    css3动画：css3之后添加了transform动画计算函数，所以实现动画更为简单方便，并且transform矩...

  • 过度动画

    css3过度动画 css3都有哪些新增的东西 : 过度，动画，阴影，圆角； transition ： width ...

  • 动画知识点

    css3过度动画 css3都有哪些新增的东西 : 过度，动画，阴影，圆角； transition ： width ...

网友评论

      本文标题：CSS3 动画

      本文链接：https://www.haomeiwen.com/subject/esxtaqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|CSS3 动画|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！