CSS3过渡效果和动画

coursor:pointer 鼠标放在样式效果上出现手指标

或者直接用<a href=”” alt=””></a >包裹

CSS3过渡

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

transition-property 过渡或动态模拟的CSS属性

transition：width、height、background-color属性等

transition-duration 完成过渡效果所需要的时间

transition-timing-function 指定过渡函数即过度的快慢

transition-delay  延迟过渡开始出现的时间

例：transition：all（作用于所有属性） 2s(过渡时间)  linear（均匀过度）0.5s/.5s (过度效果延迟多久开始)

过渡动画函数（ transition-timing-function ）

指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式

值 说明

linear 均匀即相同速度过渡

ease  慢快慢过渡效果（默认值）

ease-in 以慢速开始的过渡

ease-out 以慢速结束的过渡

ease-in-out 以慢速开始和结束的过渡

CSS3动画

animation实现动画

主要由两个部分组成

设置关键帧

@keyframes 自定义动画名 {

   0% {width:0;}

   33% {width:23px;}

   66% {width:46px;}

   100% {width:69px;}

}

语法不兼容时在@keyframes中间加浏览器案前缀，使浏览器兼容

例如：@-webkit 谷歌 @-webkit-keyframes；@-moz火狐@-moz- keyframes

调用关键帧

animation-name 由@keyframes创建的动画名称

animation–duration 过渡时间

animation-timing-function 过渡方式，同transition

animation-delay  延迟时间

animation-iteration-count 动画的播放次数,值通常为整数，默认值为1

animation-direction  动画的播放方向:normal/alternate

alternate：来回播放，从尾部有播放效果,

例如：animation: donghua  2s linear 1s infinite alternate;

infinite:动画无限次播放

animate.css动画库 ：采用外部引用方式

class类名中，第一个属基础类名，不得变动，复制粘贴改动第二个类名,也可以在样式style中设置,通过animation样式设置