Home > Developer > Web Develop
Introducing external CSS resources through @import;
Introduction of wire and JS files;
Generate different types of CSS3 animations by changing the CSS class name;
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "Utf-8">5 </Head>6 <style>7 /*animate.css GitHub Address: https://github.com/daneden/animate.css*/8 /*animate.css Demo Address: https://daneden.github.io/animate.css/*/9 Ten @import url ("Http://cdn.gbtags.com/animate.css/3.1.1/animate.min.css"); One Body{ A background:#cfcfcf; - } - img{ the position:Absolute; - Left:50%; - Top:50%; - Margin-left:-100px; + Margin-top:-100px; - width:200px; + Height:200px; A } at - </style> - <Body> - <imgsrc= "Http://www.gbtags.com/gb/networks/uploadimg/074627f0-0a62-4176-aa85-06a4364deeab.png"alt=""> - </Body> - <Scriptsrc= "Http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"type= "Text/javascript"></Script> in <Script> - functionRock (x) {//define event functions; to $('img'). Not ('. Center') + . addclass (x+ 'animated') //add CSS class name; - . One ('webkitanimationend mozanimationend msanimationend oanimationend animationend' the ,function(){ * $( This). Removeclass (); $ });Panax Notoginseng }; - the $ (document). Ready (function(){ + Rock ("Rubberband Infinite"); //add CSS class name to generate the corresponding dynamic effect; A SetTimeout (function() {window.lcation.href= "http://www.kiklink.com"},6000); the //set time jump; + }); - </Script> $ </HTML>
Two custom animate.css animations
You can use the ANIMATE.CSS code as the basis for writing custom animation effects;
1 @keyframes Bounce{/*Create bounce animations by @keyframes rules;*/2 0%,20%,50%,80%,100% {3 Transform:Translatey (0);4}5 40%{6 Transform:Translatey ( -30px);7}8 60%{9 Transform:Translatey ( -15px);Ten} One } A . Bounce{ - Animation-name:Bounce;/*call bounce animation;*/ -} the . Animated{ - animation-duration:3s;/*the duration of an animation cycle;*/ - Animation-fill-mode:both;/*Specifies the style after which the animation is executed;*/ -} + . Animated.infinite{ - Animation-iteration-count:Infinite;/*defines the number of times the animation plays; (n times/infinite Unlimited);*/ +}
Three using JavaScript to control animations1 < class= "Animated Bounce infinite" src= "http://www.gbtags.com/gb/laitu/ 150x150 " alt=" ">
1$ (' img '). Click (function(){//bind an IMG element to a point-and-click event;2 var$ This= $( This);//Add the corresponding animation class name after mouse click;3$ This. addclass (' animated bounce '). One (' Webkitanimationend mozanimationend msanimationend oanimationend ',function(){4 //when the-webkit-animation animation is finished, there is a webkitanimationend event;5 //The function function is executed after the one () method is heard by the Webkitanimationend event, and one () method can only be executed once;6$ This. Removeclass ();//clear the corresponding animation class name;7 })8});
css--animating effects with ANIMATE.CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
