You are here

Home » API reference » Blazy 7

blazy.fx.blur.css in Blazy 7

Same filename and directory in other branches
  1. 8.2 css/components/blazy.fx.blur.css

Blur effect.

While blurring animation impresses smoother transition, it is likely slow. You can override this file, and change animation to just transition instead.

File

css/components/blazy.fx.blur.css
View source 
  1. /**

  2.  * @file

  3.  * Blur effect.

  4.  *

  5.  * While blurring animation impresses smoother transition, it is likely slow.

  6.  * You can override this file, and change animation to just transition instead.

  7.  */

  8. 

  9. @-webkit-keyframes blazyBlur {

  10.   0% {

  11.     -webkit-transform: scale(1.04);

  12.     opacity: 0;

  13.   }

  14.   100% {

  15.     -webkit-transform: scale(1);

  16.     opacity: 1;

  17.   }

  18. }

  19. 

  20. @keyframes blazyBlur {

  21.   0% {

  22.     transform: scale(1.04);

  23.     opacity: 0;

  24.   }

  25.   100% {

  26.     transform: scale(1);

  27.     opacity: 1;

  28.   }

  29. }

  30. 

  31. /**

  32. Remove overflow as needed if CSS background is enabled, or on your own.

  33. .blazy {

  34.   overflow: hidden;

  35. }

  36. */

  37. 

  38. .media--fx--blur .b-lazy {

  39.   filter: blur(6px);

  40.   opacity: 1;

  41.   /* transition: opacity 500ms ease-in-out; */

  42.   transition: none;

  43.   transform: scale(1.04);

  44. }

  45. 

  46. .media--fx--blur .b-loaded {

  47.   filter: blur(0);

  48.   transform: scale(1);

  49.   /** will-change: transform, opacity; */

  50.   -webkit-animation: blazyBlur 1s ease-out;

  51.   animation: blazyBlur 1s ease-out;

  52. }