原来的时候写过一个小程序,里面有一个播放背景音乐的按钮(也是一个圆形的图片),它是一直在旋转的,当我们点击这个按钮的可以暂停或者播放背景音乐。当初的这个动画,是同事自己写的,我看到的时候以为是他在上面放了一个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不是我上面说的那个旋转暂停的,但是这个有了更多的功能。

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 动画</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
@keyframes myfirst{
from {
background: red;
left: 0px;
top: 40px;
border-radius: 0;
transform:rotate(0deg);
}
to {
background: blue;
left: 300px;
top: 200px;
border-radius: 50%;
transform:rotate(360deg);
}
}
.dong{
animation: myfirst 2s linear 0s infinite alternate;
}
/**
* animation-name 规定需要绑定到选择器的 keyframe 名称。。
* animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
* animation-timing-function 规定动画的速度曲线。
* animation-delay 规定在动画开始之前的延迟。
* animation-iteration-count 规定动画应该播放的次数。
* animation-direction 规定是否应该轮流反向播放动画。
* **/
.pause {
animation-play-state: paused;
}
.big_box{
width: 100px;
height: 100px;
background: red;
text-align: center;
line-height: 100px;
position: absolute;
left: 0px;
top: 40px;
}
</style>
</head>
<body>
<div class="big_box">一个盒子</div>
<button class="button1">开始</button>
<button class="button2">暂停</button>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(".button2").attr("disabled",true);
$(".button1").on("click.animation",function(){
$(".big_box").addClass("dong");
$(".button2").attr("disabled",false);
})
$(".button2").on("click.pause",function(){
$(".big_box").toggleClass("pause");
}) </script>
</html>

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

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

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

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

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

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

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

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.open_add_more {
animation: open 0.5s ease-in-out 0s infinite;
animation-iteration-count: 1;
/*播放一次*/
animation-fill-mode: forwards;
/*停在最后一帧*/
} @keyframes open {
from {
transform: rotate(0deg);
}
to {
transform: rotate(45deg);
}
} .close_add_more {
animation: close 0.5s ease-in-out 0s infinite;
animation-iteration-count: 1;
/*播放一次*/
animation-fill-mode: forwards;
/*停在最后一帧*/
} @keyframes close {
from {
transform: rotate(45deg);
}
to {
transform: rotate(0deg);
}
}
</style>
</head> <body>
<img src="https://s2.ax1x.com/2019/03/21/A15nF1.png" />
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$("img").click(function() {
if($(this).hasClass("open_add_more")) {
$(this).addClass("close_add_more").removeClass("open_add_more"); } else {
$(this).addClass("open_add_more").removeClass("close_add_more");
} })
</script> </html>

css3 动画 总结的更多相关文章

  1. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  2. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  3. 学习CSS3动画(animation)

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  4. 用CSS3动画,让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  5. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  6. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  7. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  8. CSS3动画事件

    CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...

  9. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  10. 简单CSS3动画制作

    本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...

随机推荐

  1. 使用IntelliJ IDEA 配置Maven(入门)【转】

    1.在IntelliJ IDEA中配置maven 打开-File-Settings  2.新建maven WEB项目 打开-File-New-Project 点击NEXT  点击NEXT  添加的配置 ...

  2. 谁在关心toString的性能?

    谁在关心toString的性能?没有人!除非当你有大量的数据在批量处理,使用toString产生了许多日志.然后,你去调查为何如此之慢,才意识到大部分的toString方法使用的是introspect ...

  3. vim 学习记录

    VIM中PHP代码使用tab键自动完成 更新于 2013-01-18 05:47:55UEANER 目录结构 $ tree -C ~/.vim | grep -v ".cnx" | ...

  4. .net mvc------下拉列表DropDownList控件------绑定数据

    下拉列表 以性别为例 绑定可以了,可以显示了,但有些地方就能传值,有些地方就会出错提示,如有大神请指教.... 错误如下: 具有键"sex"的 ViewData 项属于类型&quo ...

  5. 在asp.net web api中利用过滤器设置输出缓存

    介绍 本文将介绍如何在asp.net web api中利用过滤器属性实现缓存. 实现过程 1,首先在web.config文件下appsettings下定义“CacheEnabled”和“CacheTi ...

  6. UILabel部分文字可点击

    源代码:https://github.com/lyb5834/YBAttributeTextTapAction地址 如果想用富文本文件,可以参考的另外一篇博客; https://www.cnblogs ...

  7. 如何挂载另一个lvm硬盘

    由于测试导致系统启动不了,需要将系统中的数据拷贝出来,所以想到将磁盘挂载到另一个能用的系统中进行拷贝,但是由于创建的系统都是用默认的方式创建的,所以一般的系统盘都是由两个分区组成,例如/dev/sda ...

  8. jenkins之参数化构建

    事件背景: 今天一早接到一个需求,说要jenkins持续集成,输入自定义URL,然后完成回归测试,当时有点蒙,不知道如何下手,听群里的大神思路后豁然开朗,就记录了下 一.先安装插件 插件: [Buil ...

  9. HDS TrueCopy-数据远程容灾白皮书-IOPS数据

    http://wenku.it168.com/d_000767925.shtml Truecopy 安装实施-包含图 http://www.docin.com/p-261693079.html 来自: ...

  10. 在程序开发中怎样写SQL语句可以提高数据库的性能

    以下内容是公司dba总结. 1. 首先要搞明白什么叫执行计划?   执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来 ...