css 动画

2018-08-11 admin

css动画 首先要明白动画是一帧一帧的,由多个帧拼起来的动画

@keyframes

此为动画样式中的关键帧,用关键帧来控制css动画中的关键样式。相比较过渡更加的容易空值中间的部分 其指示了一个过程到另一个过程的过程 关键帧还具有名字,在应用的时候通过名字将其绑定。

如果关键帧重复定义,则根据最后一次定义为准

关键帧中的important会被略过

举个栗子

定义一个关键帧

@keyframes myFrames {
    form {
        background:#a7e5c6;
        width:100px;
    }

    to {
        width:90%;
        background:#c6c2a3;
    }
}

样式如下 此处输入图片的描述

这样就完成一次动画操作

分开定义

也可以进行分开定义 按照百分号进行定义,结果如下 关键帧如下

@keyframes myFrames {
    0% {
        width:200px;
        background:#827e64;
    }

    20% {
        width:400px;
        background:#86bece;
    }

    50% {
        height:600px;
        background:#af92aa;
    }

    90% {
        width:300px;
        height:400px;
        background:#698771;
    }
}

效果如下 此处输入图片的描述

animation

animation 同样是一个简写属性,相比较js写动画来说,css动画已经灰常简单了。

大概看了一点纯js动画,js动画核心在于对css样式的更改,外加一个重复时间对css不断的累加得到动画效果

下面依次说明

animation-name

和关键帧进行绑定 必须和关键帧的名字相同(废话)

animation-duration

指定一个动画的周期

负值的动画无效

举一个栗子

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    animation-name: myFrames;
    animation-duration:.9s;
}

/*关键帧*/
@keyframes myFrames {
    0% {
        width:200px;
        background:#827e64;
    }

    20% {
        width:400px;
        background:#86bece;
    }

    50% {
        height:600px;
        background:#af92aa;
    }

    90% {
        width:300px;
        height:400px;
        background:#698771;
    }
}

动画效果如下 此处输入图片的描述

animation-timing-function

定义一个动画的过程,类似于过渡的函数 同样的,有贝塞尔曲线等等 不在阐述

DevTools

谷歌浏览器的调试工具具有该方法,可以直接使用调试工具绘制贝塞尔曲线 此处输入图片的描述

animation-delay

定义动画的延迟 此处输入图片的描述 css如下

* {
    margin:0;
    padding:0;
}
body {
    position:relative;
}
div {
    width:400px;
    height:400px;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#698771;
    border-radius:1000px;
    animation-name: myFrames;
    animation-duration:5s;
    animation-timing-function:cubic-bezier(0.785, 0.135, 0.15, 0.86);
    animation-delay:.9s;
}
div div {
    width:40px;
    height:40px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#e8e3da;
    animation-name:myCenter;
}

/*关键帧*/
@keyframes myFrames {
    from {
        left:0;
    }

    to {
        left:70%;
    }
}

@keyframes myCenter {
    from {
        left:0;
    }

    to {
        left:0;
    }
}

html如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./index.css" type="text/css">
    <title>css动画</title>
</head>
<body>
    <div>
        <div></div>
    </div>
</body>
</html>
<script src="./index.js"></script>

动画延迟了0.9秒

animation-iteration-count

定义动画的迭代次数infinite 为永远重复 数值为number

举栗子

animation-iteration-count:3;

动画重复播放3次。

animation-iteration-count:infinite;

动画永远重复播放

animation-direction

定义是否向前,向后,是否交替来回

如果想要重复的多次播放,必须有animation-iteration-count的值为infinity否则不会出现重复播放

normal

为一个每次重复重新的位置开始播放(每次都将重置为新状态,开始执行) 此处输入图片的描述

reverse

倒序播放 此处输入图片的描述

alternate

奇数正向播放 偶数倒序播放 即来回 此处输入图片的描述

alternate-reverse

奇数倒序播放 偶数正向播放 即倒来回 此处输入图片的描述

ps 动画具有继承的属性

animation-fill-mode

forwards

将会保留最后一个关键帧,让其停留。 此处输入图片的描述 css

    /*animation-iteration-count:infinite;*/
    animation-direction:alternate;
    animation-fill-mode:forwards;

backwards

将会应用第一个动画值 此处输入图片的描述 和none的区别在于none使用默认的css样式,backwards将会使用动画的第一帧

    /*animation-iteration-count:infinite;*/
    animation-direction:alternate;
    animation-fill-mode:backwards;

ps 加上注释的原因是因为如果不加将会重复播放。

both

将会遵守倒序还是正序的停留

正序

    /*animation-iteration-count:infinite;*/
    animation-direction:normal;
    animation-fill-mode:both;

此处输入图片的描述

倒序

此处输入图片的描述

    /*animation-iteration-count:infinite;*/
    animation-direction:reverse;
    animation-fill-mode:both;

总写

按照上方顺序即可 css 如下

* {
    margin:0;
    padding:0;
}
body {
    position:relative;
}
div {
    width:400px;
    height:400px;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#698771;
    border-radius:1000px;
    animation:myFrames 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s infinite alternate both;
}
div div {
    width:40px;
    height:40px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#e8e3da;
    animation-name:myCenter;
}

/*关键帧*/
@keyframes myFrames {
    from {
        left:0;
    }

    to {
        left:70%;
    }
}

@keyframes myCenter {
    from {
        left:0;
    }

    to {
        left:0;
    }
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./index.css" type="text/css">
    <title>css动画</title>
</head>
<body>
    <div>
        <div></div>
    </div>
</body>
</html>
<script src="./index.js"></script>

演示效果 https://melovemingming.gitee…

原文链接:https://segmentfault.com/a/1190000015961305

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37706.html

文章标题:css 动画

相关文章
css3.0参考手册
下载地址:css3.0参考手册 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
javascript动画算法实例分析
本文实例讲述了javascript动画算法。分享给大家供大家参考。具体如下: 动画算法 Linear:无缓动效果(匀速运动); Quadratic:二次方的缓动; Cubic:三次方的缓动 Quartic:四次方的缓动; Quintic:五...
2017-03-27
JS实用的动画弹出层效果实例
本文实例讲述了JS实用的动画弹出层效果的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Tra...
2017-03-23
javascript转换静态图片,增加粒子动画效果
使用getImageData接口获取图片的像素点,然后基于像素点实现动画效果,封装成一个简单的lib &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;pa...
2017-03-24
使用HTML+CSS+JS制作简单的网页菜单界面
写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样,不过checkbox实...
2017-03-27
在AngularJS应用中实现一些动画效果的代码
在Angular当中,CSS和JavaScript之间唯一的区别就是它们的定义。没有什么区别妨碍到被定义的动画被使用。首先,我们需要加载ngAnimate模块到我们应用的root模块当中。 angular.module(&#x27;cour...
2017-03-24
使用requestAnimationFrame实现js动画性能好
使用requestAnimationFrame实现js动画性能好。先给大家简单介绍下requestAnimationFrame比起setTimeout、setInterval有哪些优势? 示例一: requestAnimationFrame...
2017-03-27
js实现类似jquery里animate动画效果的方法
本文实例讲述了js实现类似jquery里animate动画效果的方法。分享给大家供大家参考。具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果。 要点一: startrun(obj,a...
2017-03-22
javascript实现动态导入js与css等静态资源文件的方法
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下: &#x2F;** * 动态导入静态资源文件js&#x2F;css *&#x2F; var $import = fu...
2017-03-27
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
回到顶部