Animations for CSS

CSS animations are applied to Div, to Div plus CSS animations such as div rotation animation

CSS Section

. zhuan1{/*animation name for Turn 1 0.3 seconds one time to perform a stop*/Animation:zhuan10. 3s ease both;/*wait for 0s to start*/Animation-delay:0s;/*process at a constant speed*/Animation-timing-function:linear;}/*Turn animation 0% when the execution angle is 0deg 100% the execution angle is 180deg*/@-webkit-keyframes zhuan1{0%{transform:rotate (0deg); }     -%{transform:rotate (180deg);}}. zhuan2{/*animation name for 0.3 seconds to perform one stop at a time*/animation:zhuan20. 3s ease both;/*wait for 0s to start*/Animation-delay:0s;/*process at a constant speed*/Animation-timing-function:linear;}/*Turn animation 0% when the execution angle is 180deg 100% the execution angle is 0deg*/@-webkit-keyframes zhuan2{0%{transform:rotate (180deg); }     -%{transform:rotate (0deg);}}

JS section

//Navigate font move in move out display discolorationfunction Xianshibianse () {$ (". Li_"). MouseEnter (function () {$ ( This). CSS ('Color','#108EE9'); //Custom a BS variable, BS is the value of a custom attribute BS//Drop- down box shows hidden        varBS = $ ( This). attr ('BS'); $("#daohangxiala"+BS). CSS ("Display","Block"); //Customize a Class Property style: Animate Zhuan1 and zhuan2, move mouse over to perform animation 1, delete animation 2$(". ABC"+BS). Removeclass ("zhuan2"); $(". ABC"+BS). addclass ("Zhuan1"); })    $(". Li_"). MouseLeave (function () {$ ( This). CSS ('Color',' White'); varBS = $ ( This). attr ('BS'); $("#daohangxiala"+BS). CSS ("Display","None"); //Customize a Class Property style: Animate Zhuan1 and zhuan2, move mouse over to perform animation 2, delete animation 1$(". ABC"+BS). Removeclass ("Zhuan1"); $(". ABC"+BS). addclass ("zhuan2"); })

Animations for CSS