文档章节

【原创】CSS3动画总结对比 / 带思维导图 / 启发小案例

柴高八斗之父
 柴高八斗之父
发布于 2017/09/11 20:00
字数 1388
阅读 16
收藏 0
点赞 0
评论 0

一,区分3个属性到底是什么意思?

先把css3的3个属性(transition,transform,animation)搞清楚是什么意思?下面截图是百度翻译的中英文对比:

二,思维导图拟清关系

 然后再来个思维导图,把css3的动画拟下,见下图: 

原图链接见这里:https://static.oschina.net/uploads/space/2017/0911/200035_dHEA_583531.jpg

通过上图,其实可以把css3的动画分为2大类型:① 转换动画;② 关键帧动画(是不是有点之前flash的感觉?好吧,暴露年纪了。);

 关于 转换动画和 关键帧动画,怎么区分?分别适用什么场景? 

动画(较为简单) 关键帧动画(符合复杂的动画)
根据过渡时间完成,A---B的动画 根据过渡时间完成:A---B----C---更多
字母分别代表不同的动画形态节点,关键帧动画还能在此节点上定义节点间的时间间隔。从而达到更复杂的效果

它们的共同的过渡(缓冲)方式:
ease
linear
ease-in
ease-out
ease-in-out

当然,除以上的动画过渡方式外,还有动态贝塞尔曲线。

 transition: all 1000ms cubic-bezier(0.170, 0.960, 0.725, -0.355); } 

见我的另一篇文章 ↓:

https://my.oschina.net/u/583531/blog/916185  点开第二块,关于贝塞尔曲线的详细讲解。

 

 

 

三,【转换动画】transform动画及小demo

一个完整的transform的css3动画实现完成,需要指定2个。① 过渡:transition;② 类型:transform

OK,开始第一个demo。

transform:rotate 旋转角度

.box{ transition: all 0.5s;/*...box的其他属性省略,以下均同*/}
.box:hover{ transform: rotate(360deg);}

 

transformscale 缩放比例

.box{ transition: all 0.5s;}
.box:hover{ transform: scale(2);}/*小于1 缩小*/

 

transformtranslate 偏移位置

.box{ transition: all 0.5s;}
.box:hover{ transform: translate(50px,50px);}/*X,Y值*/

  

transformskew 倾斜角度 

.box{ transition: all 0.5s; }
.box:hover{ transform: skew(30deg);}

 

那么问题来了,针对多种特效一起hover,该如何弄?

.box{ transition: all 0.5s;}
.box:hover{ transform: scale(0.2) rotate(360deg) skew(20deg) translate(30px);}

如上面css所示,在transform属性后,跟 scale() rotate() skew() translate();它们之间用空格。

------------------------------------对以上所讲的案例如下----------------------------------

  案例  transformrotate 旋转角度

#menu-12  ul li{ 
	float:left; 
	margin: 15px; 
	width: 30px; 
	height: 30px; 
	line-height: 30px; 
	text-align: center; 
	border-radius: 15px; 
	background: linear-gradient(green, blue);/*为了方便观察,这里做了背景渐变*/
	color: #fff; 
	transition: all 0.3s;/*过渡*/
}
#menu-12  ul li:hover{ 
	transform: rotate(360deg);/*旋转*/
}

 

  案例  transformscale 缩放比例

#menu-02{ margin:30px auto 50px auto;  width:480px; height:50px;}
#menu-02 ul li{ 
	float:left; 
	width:120px; 
	height:50px; 
	background:#4a7f6d; 
	line-height:50px; 
	text-align:center; 
	transition: all 0.3s; /*过渡*/
}
#menu-02 ul li:hover{
	background:#4a7f6d;
	color:#fff;
	/*放大*/
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-o-transform:scale(1.2);
}

 

 

 

------------------------------------------好啦,我是分割线------------------------------------------------

下面开始做点小demo吧。

 

===============================================================

小案例01:利用translate做按钮点击下沉

.box{ transition: all 0.3s; width: 70px; height: 30px; text-align: center; line-height: 30px;  color: #fff; background: #003BB3; cursor: pointer; }
.box:active{ transform: translate(2px,2px);}

 技巧:在伪类active-上做偏移 。

 

 题外话:用jquery可以做按钮下沉吗?

jquery 利用offset 做按钮偏移,传送门戳这里:https://my.oschina.net/u/583531/blog/300681

===============================================================

 

 

===============================================================

小案例02:利用transition锦上添花;

 技巧:把背景切换图先做好,然后给个transition时间和缓冲方式就OK了。

===============================================================

 

===============================================================

小案例03:利用 transform中的 scale 和 translate 共同作用;

 技巧:transform后跟的属性和值后不要敲分号,是空格。

.box:hover{ transform: scale(0.2) rotate(360deg) skew(20deg) translate(30px);}

 

===============================================================

 

四,【关键帧动画】-以及小demo

直接来小案例吧;图如下(gif图的原因,感觉好像很卡,实际在浏览器运行很流畅。)

  1. 基本的样式先定义好;
  2. hover上使用 animation
  3. 然后在下面定义好 keyframes
.box{ float: left; margin-right: 20px;  padding-top: 7px; width: 50px; height: 43px; border-radius:25px ; background: orange; text-align: center; cursor: pointer;}
.box:hover{ animation:chai 0.5s ease-in-out;} /*这里的animation 调用下面的 keyframes的名称:chai*/

@-webkit-keyframes chai /*这里的chai被上面的animation调用*/
{
	0% { transform: scale(0.8);}
	25% { transform: scale(1.2);}
	50% {transform: scale(0.8);}
	75% {transform: scale(1.2);}
	100% {transform: scale(1);}
}

学习关键帧动画,最佳的方案就是直接去看 animate.css的源码 https://daneden.github.io/animate.css/

 

如何做一个不断运动循环的动画?

见效果图如下:

css

@-webkit-keyframes chai /*这里的chai被上面的animation调用*/
{
						0% { transform: scale(0.8);}
						25% { transform: scale(1.2);}
						50% {transform: scale(0.8);}
						75% {transform: scale(1.2);}
						100% {transform: scale(1);}
}
#Brand-vision > i{
						color: greenyellow;
						animation:chai 0.6s ease-in-out infinite; /*注意这里infinite即为循环*/
}

html

<div id="Brand-vision">
					<i class="fa fa-circle" aria-hidden="true"></i> 品牌网络助力!
				</div>

 

 

五,css3动画和jquery的结合

由于css3的事件比较弱,所以选择css3的动画大多是伪类hover来操作;因此,实际工作中,通常是css3流畅的动画+jquery强大的选择器和事件来结合做动画。

它们是如何结合的?

【原创】css3+jquery 实现横线跟随菜单-含详细优化过程和思考

请戳这里:https://my.oschina.net/u/583531/blog/1535313

 

六,未完待续的总结

以上动画,都出触发事件类的动画,他们有一个特点,就是利用css的伪类hover,或者结合js的鼠标事件来触发,然后追加动画的样式。

 

思考:如何做动画小短片?

接下来会讲利用js的settimeout来做让dom队列出来的动画,这个就可以做动画小短片了。如果可以,你可以将某一个块状做成类似flash的影片剪辑。比如,天空有一个一直在闪烁的星星,其他人物或者主题物按照顺序一个个出场...强大的css3+jquery,可以实现你所想!

setTimeout(function(){
      $('.yourdiv').addClass('xxx');
}, 5000);


setInterval(function(){ 
    $('.yourdiv').toggleClass('xxx');
}, 3000 );

 

© 著作权归作者所有

共有 人打赏支持
柴高八斗之父
粉丝 4
博文 158
码字总数 80691
作品 0
宁波
前端工程师
CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

如果下面有提及‘发稿时间’,或者‘截止时间’,是指‘2017-8-1’。因为这篇文章是一篇迁移文章,是我以前在其它社区发布的原创文章。 1.前言 在自己的专栏上写了十几篇文章了,都是与js有关...

守候i ⋅ 2017/11/20 ⋅ 0

游戏开发与程序设计知识总结03——算法

更新日志 每此对思维导图有改动或者在github中有了对应的实现,则增加一条更新日志。 2017.9.2: 确定更新为系列文章并持续维护 前言 这是游戏开发与程序设计知识总结系列文章的第三篇算法,...

kashiwa ⋅ 2017/09/02 ⋅ 0

程序猿必备的15款web前端动画插件七

  1.超简易的SVG/CSS3 Loading加载动画图标   今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画...

爱码农 ⋅ 01/08 ⋅ 0

思维导图软件MindManager实用功能TOP 10(二)

MindManager是大家熟知的思维导图管理软件,本文通过一个使用MindManager 12年的忠实用户总结出来的10点关于这个软件有趣的实用功能,希望可以帮助大家更好的运用MindManager在日常的工作和生...

龅牙猫 ⋅ 2013/10/24 ⋅ 0

【掘金小报】第九期 数据结构常见的八大排序算法总结

掘金小报主打分享优质深度技术内容,技术内容分:前端、后端、Android、iOS、产品设计、工具资源和一些有趣的东西。 与标题相关的文章在后端:数据结构常见的八大排序算法 前端 两种折线平滑...

膜法小编 ⋅ 2017/05/08 ⋅ 0

个人分享--web前端学习资源分享

1.前言 时间过得真快,转眼间现在是2017年最后一个星期,而今天也是圣诞节,过几天也是元旦了。每到年底,大家都习惯总结和分享,我也不例外。但是经历,我之前已经发过了,那么我今天就分享...

⋅ 2017/12/25 ⋅ 0

10 个基于 jQuery/CSS3 的图片特效

jQuery作为理想的开源Javascript开发库,已经被广大前端开发者所接受和使用,由jQuery编写的图片插件也数不胜数。CSS3是最近几年刚兴起的新技术,CSS3的应用,可以让图片拥有非常绚丽的特效,...

ruby_chen ⋅ 2013/10/26 ⋅ 0

20+功能强大的jQuery/CSS3图片特效插件

以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3。 1、jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有弹跳...

ruby_chen ⋅ 2013/10/14 ⋅ 5

干货分享!HTML5 动效的常见制作手法

原文出处:腾讯ISUX - 田田 众所周知,一个元素,动往往比静更吸引眼球; 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验; 一个H5运营宣传页,炫酷的动画特效定能助力传播和品...

腾讯ISUX - 田田 ⋅ 2015/12/08 ⋅ 0

你可以知道的关于XMind的样式

XMind思维导图为用户提供了丰富的模板和快捷的图标及属性设置。那么,对于思维导图的样式与形式,我们该如何理解呢?   1. 画布属性   在XMind内,我们不仅可以逐一对每个主题的线条设置其...

xmind ⋅ 2015/08/04 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部