【原创】CSS3动画总结对比 / 带思维导图 / 启发小案例
【原创】CSS3动画总结对比 / 带思维导图 / 启发小案例
柴高八斗之父 发表于1个月前
【原创】CSS3动画总结对比 / 带思维导图 / 启发小案例
  • 发表于 1个月前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云实验室 1小时搭建人工智能应用,让技术更容易入门 免费体验 >>>   

摘要: css3

一,区分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);}

 

transform-scale 缩放比例

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

 

transform-translate 偏移位置

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

  

transform-skew 倾斜角度 

.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();它们之间用空格。

 

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

下面开始做点小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);}
}

 

五,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 );

 

共有 人打赏支持
粉丝 3
博文 125
码字总数 45317
×
柴高八斗之父
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: