过渡和动画

1、transition 过渡

过渡效果通常由浏览器直接改变元素的CSS属性实现，从一种状态过渡到另外一种状态。

在CSS中建立简单的过渡效果能够从如下几个步骤来实现：

第1、在默认样式中声明元素的初始状态样式；

第2、声明过渡元素最终状态样式，好比悬浮状态；

第3、在默认样式中经过添加过渡函数，添加一些不一样的样式。

transition 是一个简写属性，用于设置四个过渡属性：

transition: 2s 3s all linear; (过渡时间 延迟时间 属性 速度)

下面的表格列出了全部的转换属性：

1.transition-property

2.transition-duration

3.transition-timing-function

4.transition-delay

实例：

在一个例子中使用全部过渡属性：

2、animation 动画

CSS3 @keyframes 规则

如需在 CSS3 中建立动画，您须要学习 @keyframes 规则。

在 @keyframes 中规定某项 CSS 样式，就能建立由当前样式逐渐改成新样式的动画效果。

一、什么是 CSS3 中的动画？

动画是使元素从一种样式逐渐变化为另外一种样式的效果。

您能够改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

二、CSS3 动画属性

animation: 自定义名字 持续时间 动画类型 延迟时间 次数;

下面的表格列出了 @keyframes 规则和全部动画属性：

实例：

改变背景色和位置：

运行名为 myfirst 的动画，其中设置了全部动画属性：

若是文中有不妥或者错误的地方还望高手的您指出，以避免误人子弟。

若是您有更好的建议，不如留言一块儿讨论，共同进步！ 再次感谢您耐心的读完本篇文章。

vx：bsl521921