samedi 17 février 2018

CSS accurate timing animations

I have a specific situation where I need to display buttons which flicker at certain frequencies. It is of utmost importance that the buttons flicker as accurately as possible (for example: at 5Hertz, 10Hertz, etc..) I am currently using CSS keyframes to achieve this, for example:

  .flashing{
      -webkit-animation: 0.2s flash linear infinite;
      -moz-animation: 0.2s flash linear infinite;
      -ms-animation: 0.2s flash linear infinite;
      animation: 0.2s flash linear infinite;
   }

    @keyframes flash {
           0% { background-color: red; }
           50% { opacity: white; }
       }

Is there a way to increase the timing accuracy further than this by utilising CSS? (for example, syncing with the browser's refresh rate?)

In short: I am trying to find the best way to display CSS timing animations as accurately as possible

Thank you




Aucun commentaire:

Enregistrer un commentaire