Simple flashing effect of css3 elements (html5 jquery)

高洛峰
Release: 2016-11-24 10:11:53
Original
1303 people have browsed it

css3 Animation:

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

Jquery:

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

You can also add the following in the css style:

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

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)


Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template