css动画animation元素

最新推荐文章于 2024-07-25 10:45:42 发布

Aaron_sal

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量533

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/xiaopihaisal/article/details/79898227

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先放一个完整的关于鱼游水动画代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>css动画</title>
<style>
    body{
        background-color: lightblue;
        overflow: hidden;
        }
    .fishbox{
        background-color: red;
        width: 200px;
        height: 200px;
        position: absolute;
        left: 0;
        right: 0;
        animation: run 20s linear infinite;
        animation-direction: normal;
    }
    .fish{
        width: 174px;
        height: 126px;
        background-image: url(img/fish8.png);
        position: absolute;
        left: 35%;
        top: 0;
        animation: active1 0.8s steps(8) infinite;
    }
    .sharkbox{
        background-color: red;
        width: 509px;
        height: 270px;
        position: absolute;
        left: 0;
        top: 200px;
        animation: run2 20s linear infinite;
    }
    .shark{
        width: 509px;
        height: 270px;
        background-image: url("img/shark1.png");
        position: absolute;
        left: 0;
        top: 0;
        animation: active2 0.8s steps(8) infinite; /*steps(8)就相当于把此次动画分为8步完成，-2160/8=270；具体可在https://segmentfault.com/a/1190000007042048中学习*/
    }

    @keyframes run {
        0%{

        }
        25%{
            transform: translate(600px,0) rotate(45deg);/*动画下一步到达的一个点*/
        }
        50%{
            transform: translate(600px,350px) rotate(135deg);
        }
        75%{
            transform: translate(50px,300px) rotate(235deg);
        }
        100%{
            transform: translate(0,0) rotate(360deg);
        }
    }
    @keyframes active1 {
        0%{

        }
        100%{
            background-position: left  -1008px;
        }
    }
    @keyframes run2 {
        0%{

        }
        100%{
            transform: translateX(2000px);
        }
    }
    @keyframes active2 {
        0%{

        }
        100%{
            background-position:left -2160px;
        }
    }
</style>
</head>

<body>
<div class="fishbox">
    <div class="fish"></div>
</div>

<div class="sharkbox">
    <div class="shark"></div>
</div>
</body>
</html>

解析本例所用知识点：

一、animation属性：

animation属性为以下六个属性的简写形式：

animation-name：需要绑定的keyframe名称。

{

@keyframes animationname {keyframes-selector {css-styles;}}

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

animationname

必需。定义动画的名称。

keyframes-selector

必需。动画时长的百分比。

合法的值：

0-100%
from（与 0% 相同）
to（与 100% 相同）

css-styles

必需。一个或多个合法的 CSS 样式属性。

}

eg:

   @keyframes active2 {
        0%{

        }
        100%{
            background-position:left -2160px;
        }
    }

animation-duration：规定动画完成所需花费时间，秒或者毫秒计算

animation-timing-function：规定动画的曲线速度

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay：规定动画在开始之前的延时

animation-iteration-count：规定动画应该播放的次数(infinite为无限次)

animation-direction：规定是否应该轮流反向播放动画

二。transform属性：

向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform: none|transform-functions;

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

Aaron_sal

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css动画animation元素

先放一个完整的关于鱼游水动画代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;css动画&lt;/title&gt;&lt;style&gt; body{ background-
复制链接

扫一扫

专栏目录