Home  >  Article  >  Web Front-end  >  Simple flashing effect of css3 elements (html5 jquery)

Simple flashing effect of css3 elements (html5 jquery)

高洛峰
高洛峰Original
2016-11-24 10:11:531294browse

css3 Animation:

@-webkit-keyframes twinkling{    /*透明度由0到1*/ 
   0%{ 
      opacity:0; /*透明度为0*/ 
    } 
   100%{ 
      opacity:1; /*透明度为1*/ 
 
   } 
 }

Jquery:

   $(element).css({"-webkit-animation":"twinkling 1s infinite ease-in-out"}); //在对象element中添加闪烁动画

You can also add the following in the css style:

    #element{
 
          -webkit-animation: twinkling 1s infinite ease-in-out;
 
 
     }

Note: The animation name is twinkling The time is 1s The number of animations is unlimited Animation effect ease-in- out

Simple! In fact, using css3 to create animation effects is much more convenient and simpler than using flash and javascript! I hope that browsers will soon support css3 Animation. Currently, browsers with webkit core support (safrai, chrome)


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:css overflow propertyNext article:css overflow property