您的位置：首页 > Web前端 > CSS

css3动画记录篇

2016-12-30 20:45 162 查看

PC端动画过度变换的兼容情况，用前阅读如下：（移动端由于手机迭代快，所以移动开发可不必考虑）

（1）transform：Chrome、Safari、Opera、Firefox、IE9 分别需要前缀 -webkit-、-o-、-moz-，-ms-。

（2）transition：Chrome、Safari、Opera、Firefox分别需要前缀-webkit-、-o-、-moz-，IE9不支持此属性

（3）@keyframes
规则 animation 属性：Chrome、Safari、Opera、Firefox、IE9 分别需要前缀 -webkit-、-o-、-moz-，IE9对此均不支持

1，上下移动

[html] view
plain copy

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <style>

        .box{width: 100px;height: 100px;margin: 100px; background: yellow;}

        /*以下是时间段的分布0%到%50就是说这之间占有一半（50%）的时间，即Y轴0px到Y轴-50px用时为2s的一半，效果为上下移动*/

        @keyframes topBottomMove{

        0%   {

            transform: translateY(0px);

            }

        50%  {

         transform: translateY(-50px);

         }

        100% {

        transform: translateY(0px);

        }

    }

    .box {

        animation: topBottomMove 2s infinite ease-in-out;

    }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

2、360°无限循环

[html] view
plain copy

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<style type="text/css">

*

{

margin:0;

padding:0;

text-align:center;

}



@keyframes myRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

#box

{

width:300px;

height:300px;

margin: 300px auto;

border-radius: 50%;

/*linear为直线的，infinite则表示无限的*/

animation:myRotate .8s linear infinite;

color: white;

background:black;

}

</style>

<div id="box">

ABC

</div>

</body>

</html>

3，放大缩小

[html] view
plain copy

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<style type="text/css">

*

{

margin:0;

padding:0;

text-align:center;

}



@keyframes mymove{

       0%   { transform: scale(1) }

       25%  { transform: scale(.8) }

       50%  { transform: scale(1.1) }

       75%  { transform: scale(.9) }

       100% { transform: scale(1) }

    }

    /*如果在vue上使用，需要实现触发一次就执行一次的话，则可以用:class='{move:move}'，.move{animation: mymove .5s  infinite;},通过修改move的boolean值达到效果*/

#box

{

width:300px;

height:300px;

line-height: 300px;

margin: 300px auto;

border-radius: 50%;

font-size: 200px;

border: 5px solid red;

/*infinite则表示无限,ease-in-out则是执行一次*/

animation: mymove .5s  infinite;

color: white;

background:black;

}

</style>

<div id="box">

A

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航