前端开发人员如何创建CSS动画

html-css011

前端开发人员如何创建CSS动画,第1张

创建动画:@keyframes规则。

方式一:from{属性:值} to{属性:值}

创建动画

方式二:0%{属性:值} 100%{属性:值}

0% 是动画的开始,100% 是动画的完成。可以在二者之间加入25%,50%等。

将动画绑定到选择器:

在样式中,设置动画属性animation,自定义动画名称和时长。

animation:动画名 时长;

此时就可以完成一个简单的动画了,要进行更多设置还需要其他属性。

Github地址: https://github.com/daneden/animate.css

体验地址: https://daneden.github.io/animate.css/

使用:

(1)仅仅执行动画,不执行其它操作

$('#yourElement').animateCss('bounce')

(2)先执行动画,完成之后,执行其它操作

$('#yourElement').animateCss('bounce', function() {

// Do somthing after animation

})