前端技术面——（CSS3新特性）-CSDN博客

1、transition和animation有什么区别？

transition，CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。需要一种条件来触发这种转变。

特点
- 需要事件触发，所以没法在网页加载时自动发生
- 是一次性的，不能重复发生，除非一再触发
- 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态
- 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
触发方式
- :hover
- :focus
- :checked
- 媒体查询触发
- javascript触发
示例
```
  #box {
      margin: auto;
      height: 100px;
      width: 100px;
      background: green;
      transition: all 1s ease-in 0s;
  }

  #box:hover {
      transform: rotate(180deg) scale(.5, .5);
      background-color: red;
  }
复制代码
```

animation

组成：

通过类似Flash动画中的帧来声明一个动画
在animation属性中调用关键帧声明的动画。

示例

div{
  animation:myfirst 4s infinite alternate;
}

@keyframes myfirst
{
  0% {background:red;}
  50%{background:blue; transform: translate(20px,-20px)}
  75%{background:green;transform: translate(40px,0px) scale(1.5)}
  100% {background:yellow;transform: rotate(-45deg)}
}
复制代码

特点

animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。

区别

Animation也是通过指定某一个属性（如width、left、transform等）在两个值之间如何过渡来实现动画的，与Transition不同的是，Animation可以通过keyframe显式控制当前帧的属性值，而Transition只能隐式来进行（不能指定每帧的属性值），所以相对而言Animation的功能更加灵活。
另外一个区别是Animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而Transition确实改变了元素的属性值，动画结束之后元素的属性发生了变化

2、CSS3新特性有哪些？

animation
transition
transform
- scale
- scale3d
- translate
- translate3d
- rotate
- rotate3d
- skew
- perspective
- transform本质上是一系列变形函数，分别是translate位移，scale缩放，rotate旋转，skew扭曲，matrix矩阵。
伪元素
边框
- border-radius
- box-shadow
- border-image
背景
- background-size
- background-origin
- background-clip
- background-image
文本
- text-shadow
- text-wrap
- @font-face

3、H5新特性

1.语意特性,添加 <nav>导航、<audio>音频, <video>视频,<source>源文件,<header>页面头部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部、 <embed>, <track>等标签

2.多媒体，用于媒介回放的 video 和 audio 元素

3.图像效果，用于绘画的 canvas 元素，svg元素等

4.离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies等

5.设备兼容特性，HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，

6.连接特性，更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能

7.性能与集成特性，HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作

8.地理定位
h5提供了Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问。

4、Canvas和SVG

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。highchart是基于svg技术的，而echart是基于canvas技术的。

描述

Canvas

通过Javascript来绘制2D图形。
是逐像素进行渲染的。
其位置发生改变，会重新进行绘制。

SVG

一种使用XML描述的2D图形的语言
SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。

比较

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

示例

<svg style="background:pink;width:100%;height:200px">      
    <rect x="10" y="50" width="100" height="100" fill="blue"  stroke="yellow" stroke-weight="30"/>
    <circle cx="200" cy="100" r="50" fill="blue" />
    <line x1="360" y1="10"  x2="460" y2="220" fill="blue" stroke="yellow"/>
    <ellipse cx="550" cy="100" rx="100" ry="80" fill="yellowgreen"/>
    <polyline points="700,50 800,50 800,150 700,150  700,50" stroke-width="1" stroke="yellow" fill="white"/>
 </svg>
复制代码

<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid red">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ct=c.getContext("2d");
    ct.fillStyle="yellowgreen";
    ct.fillRect(5,10,150,60);
</script>
复制代码