css的动画是作用于div，给div加css动画 例如div旋转动画
css部分
.zhuan1{/*动画名字为转1 ??0.3秒一次 ?执行一次 停止*/ ???animation:zhuan1 0.3s ease both;/*等待0s开始*/ ???animation-delay:0s;/*过程匀速进行*/ ???animation-timing-function: linear;}/*转动画 0%的时候执行角度为0deg 100%执行角度为180deg*/@-webkit-keyframes zhuan1{ ???0%{ ???????transform: rotate(0deg); ???} ???100%{transform: rotate(180deg);}}.zhuan2{/*动画名字为转 0.3秒一次 ?执行一次 停止*/ ???animation:zhuan2 0.3s ease both;/*等待0s开始*/ ???animation-delay:0s;/*过程匀速进行*/ ???animation-timing-function: linear;}/*转动画 0%的时候执行角度为180deg 100%执行角度为0deg*/@-webkit-keyframes zhuan2{ ???0%{ ???????transform: rotate(180deg); ???} ???100%{transform: rotate(0deg);}}js部分
//导航字体移入移出显示变色function xianshibianse(){ ???$(".li_").mouseenter(function(){ ???????$(this).css(‘color‘,‘#108EE9‘); ???????//自定义了一个bs变量，bs是自定义属性bs的值 ???????//下拉框显示隐藏 ???????var bs = $(this).attr(‘bs‘); ????????$("#daohangxiala"+bs).css("display","block"); ???????//自定义一个class属性样式：动画zhuan1和zhuan2，鼠标移入执行动画1，删除动画2 ???????$(".abc"+bs).removeClass("zhuan2"); ???????$(".abc"+bs).addClass("zhuan1"); ???}) ???$(".li_").mouseleave(function(){ ???????$(this).css(‘color‘,‘white‘); ???????var bs = $(this).attr(‘bs‘); ????????$("#daohangxiala"+bs).css("display","none"); ???????//自定义一个class属性样式：动画zhuan1和zhuan2，鼠标移入执行动画2，删除动画1 ???????$(".abc"+bs).removeClass("zhuan1"); ???????$(".abc"+bs).addClass("zhuan2"); ???})css的动画
原文地址：https://www.cnblogs.com/-dashu/p/9276730.html