css3 动画总结

XiNGRZ 发布于2019-04-23 13:19 / 1814人阅读

摘要：如果你做其他的动画，或者动画之类的，一定知道帧这个东西。这个是动画的一个过程，电脑是根据帧，然后渲染得到的一个连续的动画。规定完成动画所花费的时间，以秒或毫秒计。就是播放一次停在最后一帧播放次数和播放完成之后保留的最后的转态。

　　原来的时候写过一个小程序，里面有一个播放背景音乐的按钮（也是一个圆形的图片），它是一直在旋转的，当我们点击这个按钮的可以暂停或者播放背景音乐。当初的这个动画，是同事自己写的，我看到的时候以为是他在上面放了一个gif图呢。但是没有想到他是自己写的一个动画。早就想自己整理一下关于c3 动画的一些信息了，今天就在这里小小的总结一下，然后也算是自己的一个小的笔记。

　　首先说c3动画，就必须提到animation 这个就相当于咱们写的background的一样，是一个c3新增的属性。这个就能写动画了。如果你做其他的动画，或者flash动画之类的，一定知道“帧”这个东西。这个是动画的一个过程，电脑是根据帧，然后渲染得到的一个连续的动画。看一小段代码：

.dong{
         animation: myfirst 2s linear 0s infinite alternate;    
     }

这个就是我们写c3动画中经常用到的属性。这种连写的好处就是简单，但是对于初学者，这个简直就是噩梦，所以如果我们不熟练的话，可以一个一个的写，虽然比较繁琐，但是每个字段什么意思都是清晰可见的。

/**
             * animation-name    规定需要绑定到选择器的 keyframe 名称。。
             * animation-duration    规定完成动画所花费的时间，以秒或毫秒计。
             * animation-timing-function    规定动画的速度曲线。
             * animation-delay    规定在动画开始之前的延迟。
             * animation-iteration-count    规定动画应该播放的次数。
             * animation-direction    规定是否应该轮流反向播放动画。
             * **/

这里附上一个链接地址，里面有各个属性的属性值。点这里

　　回到咱们上个问题，就是点击这个按钮的时候，需要将这个动画暂停，然后再次点击的时候开始这个动画。这个时候就需要用到一个叫做“animation-play-state”的属性了，他的属性值我们可以设置为“paused”。当然了实际的生产中，我们肯定是会给这个属性一个class类名的，然后通过控制这个class类名的添加和删除，来控制这个动画的暂停和开始。请看下面的一行css代码：

.pause {
    animation-play-state: paused;
}

好了，到了这里差不多css3 的动画就完了。下面附上一段我自己写的小的demo，但是需要注意的是，这个demo不是我上面说的那个旋转暂停的，但是这个有了更多的功能。

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>css3 动画title>
 6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7         <style type="text/css">
 8             @keyframes myfirst{
 9                 from {
10                     background: red;
11                     left: 0px;
12                     top: 40px;
13                     border-radius: 0;
14                     transform:rotate(0deg);
15                 }
16                 to {
17                     background: blue;
18                     left: 300px;
19                     top: 200px;
20                     border-radius: 50%;
21                     transform:rotate(360deg);
22                 }
23             }
24             .dong{
25                 animation: myfirst 2s linear 0s infinite alternate;    
26             }
27             /**
28              * animation-name    规定需要绑定到选择器的 keyframe 名称。。
29              * animation-duration    规定完成动画所花费的时间，以秒或毫秒计。
30              * animation-timing-function    规定动画的速度曲线。
31              * animation-delay    规定在动画开始之前的延迟。
32              * animation-iteration-count    规定动画应该播放的次数。
33              * animation-direction    规定是否应该轮流反向播放动画。
34              * **/
35             .pause {
36                 animation-play-state: paused;
37             }
38             .big_box{
39                 width: 100px;
40                 height: 100px;
41                 background: red;
42                 text-align: center;
43                 line-height: 100px;
44                 position: absolute;
45                 left: 0px;
46                 top: 40px;
47             }
48         style>
49     head>
50     <body>
51         <div class="big_box">一个盒子div>
52         <button class="button1">开始button>
53         <button class="button2">暂停button>        
54     body>
55     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
56     <script type="text/javascript">
57         $(".button2").attr("disabled",true);
58         $(".button1").on("click.animation",function(){
59             $(".big_box").addClass("dong");
60             $(".button2").attr("disabled",false);
61         })
62         $(".button2").on("click.pause",function(){
63             $(".big_box").toggleClass("pause");
64         })
65         
66     script>
67 html>

---------------------------------------华丽的分割线------------------------------------------------------

　　既然咱们提到了动画，那就不能不提到动画的性能。既然说到性能那肯定又要说道浏览器的重绘，回流还有重布局。这样就很麻烦了，而且动画不只有css的动画，jquery也提供了一套动画。所以我就简单的总结了一下，如果不准确的话，请各位指教。

　　操作一个dom元素的位置的话，可以使用css3的transform属性，这样会比jquery的动画快上不少。但是如果是操作一个dom元素的长宽的时候，尽量的使用jquery的动画。但是需要注意的一点是，jquery的动画只能设置数字值。也就是说你如果想动态的改变一个元素的背景颜色的话，只能使用css3的动画。jquery无能为力，最后附上一个链接，我感觉写的比较好。点这里，还有这一个

　-------------------------------------新增的内容-------------------------------------------------------

　　这次写动画是一个旋转动画，不同的一点是，点击一个加号，然后让他旋转45°成为叉号，然后再次点击的话，这个叉号，旋转回来变成了加号。（设计的还挺好的）。这个需要多两个属性，是上面没有用到的。就是

1 animation-iteration-count:1;/*播放一次*/
2 animation-fill-mode:forwards;/*停在最后一帧*/

　　播放次数和播放完成之后保留的最后的转态。这个是这次新用的。然后我把demo也放在下面，方便大家直接观看。

 1 DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>title>
 7         <style type="text/css">
 8             .open_add_more {
 9                 animation: open 0.5s ease-in-out 0s infinite;
10                 animation-iteration-count: 1;
11                 /*播放一次*/
12                 animation-fill-mode: forwards;
13                 /*停在最后一帧*/
14             }
15             
16             @keyframes open {
17                 from {
18                     transform: rotate(0deg);
19                 }
20                 to {
21                     transform: rotate(45deg);
22                 }
23             }
24             
25             .close_add_more {
26                 animation: close 0.5s ease-in-out 0s infinite;
27                 animation-iteration-count: 1;
28                 /*播放一次*/
29                 animation-fill-mode: forwards;
30                 /*停在最后一帧*/
31             }
32             
33             @keyframes close {
34                 from {
35                     transform: rotate(45deg);
36                 }
37                 to {
38                     transform: rotate(0deg);
39                 }
40             }
41         style>
42     head>
43 
44     <body>
45         <img src="https://s2.ax1x.com/2019/03/21/A15nF1.png" />
46     body>
47     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
48     <script type="text/javascript">
49         $("img").click(function() {
50             if($(this).hasClass("open_add_more")) {
51                 $(this).addClass("close_add_more").removeClass("open_add_more");
52 
53             } else {
54                 $(this).addClass("open_add_more").removeClass("close_add_more");
55             }
56 
57         })
58     script>
59 
60 html>

GPU云服务器云服务器 css3动画高性能css3动画 css3 css3气泡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1723.html

myslide 插件开发知识点总结和 css3 动画性能问题的研究

摘要：插件开发知识点总结和动画性能问题的研究这篇文章主要是总结最近开发过程中遇到的问题。有几个问题又是不容易发现原因的问题，但是最后的结果又是很简单的。和都是可以指定函数运行时，的值。比如触发盒子的还有就是禁止元素在水平或者竖直方向滚动。 myslide 插件开发知识点总结和 css3 动画性能问题的研究这篇文章主要是总结最近开发过程中遇到的问题。有几个问题又是不容易发现原因的问题，但是最...

iliyaku 2019-08-19 17:54 评论0 收藏0
css3 动画（三）animation 简介

摘要：默认，只执行一次动画动画名称，该名称为动画关键帧的名称。默认如何理解表示的是关键帧的名称，那么如何定义关键帧呢使用。语法名称关键帧样式或总结其实也并不复杂，其有个子属性。下一篇动画三源码解析通过阅读动画库的源码，来提高对中属性的认识前言上一篇中，总结了一下 transition 以及 cubic-bezier()。本篇中，将介绍 css3 动画中的更为灵活的动画属性：animati...

itvincent 2019-08-29 16:05 评论0 收藏0
css3+less随机动画总结

摘要：前言有个动画需求，有几个，需要不同时，不同幅度移动，用了实现重点使用，内可嵌入代码，获得的内容可以做名字，也可以当作数字参与的其他计算，但是获得的内容不能当作名字编译前编译后总结在前言有个动画需求，有几个div，需要不同时，不同幅度移动，用了css3+less实现重点使用~``，``内可嵌入js代码，获得的内容可以做keyframes 名字，也可以当作数字参与less的其他计算...

Mertens 2019-08-30 14:07 评论0 收藏0
不会做动画的程序猿不是好的动画师（如何用css3动画做动画）

摘要：一过渡一的作用二的属性二和动画一动画序列书写简例二书写简例常用属性简写属性三完整动画简例代码三转换一转换缩放移动旋转设置元素转换的中心点综合性写法二转换三维坐标系透视呈现位移旋转一过渡一的作用如果你有一个盒子，他的体内也有个小盒子。 ...

xeblog 2021-11-11 16:55 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0