变形、过渡与动画

借助于CSS,不仅可以做出平面设计师常用的滤镜、渐变等设计效果,还可以设计出一些交互动画,增强用户的体验。

变形属性Transform

CSS transform属性能通过修改CSS视觉格式化模型的坐标空间旋转、缩放、倾斜或平移给定的html元素。

关于变形Transform、过渡Transition、动画Animation的技术文档,大家先不要急着钻研,粗略浏览一下即可,以后有时间再来研究。

技术文档:CSS 变形属性transform

transform实现垂直居中

缩放的交互特效

旋转的交互特效

过渡属性Transition

CSS transitions 可以控制HTML元素从一个属性状态切换为另外一个属性状态时的过渡效果。

技术文档:CSS 过渡属性Transition

建议大家只用简写属性transition,多个属性连着一起写会更好一些,transition的语法如下,语法比较复杂,大家可以结合后面的实际案例

  • transition-property,应用过渡的 CSS 或动画属性的名称;
  • transition-duration,整个过渡效果持续的时间,默认时间为0秒,所以要有过渡效果这个是必须定义的;
  • transition-timing-function,规定过渡效果的时间曲线,默认为ease;
  • transition-delay,过渡效果延迟多久,或者说何时开始,默认为0秒,不定义的话也就是直接开始;

背景颜色的变化

同样还是把下面的代码输入到html文件当中,通过实战的方式来查看效果。动画是需要触发的,这里我们使用的是悬停hover来触发效果,把鼠标放在元素上8秒以上,看一下正方形的背景颜色有什么变化。

了解了效果之后,我们再来结合实际案例理解语法:

  • 因为我们是用hover来触发的,所以transition要写在元素的hover伪类里,盒子之前的背景是绿色green,悬停的背景是黄色yellow;
  • 因为我们改变的是盒子background-color,所以transition需要过渡的CSS属性名称,就是background-color;
  • 动画过渡持续的时间,我们设置的是5秒,也就是背景由绿色变为黄色的时间;
  • 这里的ease-out(慢速结束)是颜色过渡的时间曲线效果。还可以有linear(匀速)、ease-in(慢速开始)、ease-in-out(慢速开始和慢速结束)。持续的时间很短的情况下,这几个时间曲线效果差别是及其细微的,需要设计师对动画足够敏感了
  • 动画延迟的时间是3秒,也就是说3秒之后动画才开始。

超链接悬停效果过渡

多个效果叠加

技术文档:可设置动画的属性列表

动画属性Animation

CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

技术文档:CSS动画属性Animation

 

 

CSS3 动画库 Animate.css

Animate.css是一个有趣的,跨浏览器的css3动画库,只需要你引入一个CSS文件,就能够给指定的元素添加动画样式。

技术文档:Animate.css

它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 80种动画效果,几乎包含了所有常见的动画效果。

CSS3悬停动效Hover.css

Hover.css 是CSS3悬停效果的集合,可以应用到链接、按钮、Logo、SVG以及特定的图片上面。当你把鼠标放置到一个元素上面,它就会触发一些动态的效果.

技术文档:Hover.css

 

本节任务

3.查看Animate.css的文档说明,并在项目的index.html里面给一张图片添加bounceInUp的动画、给一段文字fadeIn的动画;

4.查看Hover.css的案例,并在项目的Index.html里面给一个a标签添加一个hover为Border Transitions的Underline from center的动画效果;