Merge pull request #588 from bitmovin/feature/prefix-css-animations

Prefix css animations

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+
+### Fixed
+- Potential name clashing in CSS animations due to missing `bmpui` prefix
+
 ## [3.52.1] - 2023-11-13
 
 ### Fixed

src/scss/skin-modern/components/_bufferingoverlay.scss

@@ -38,7 +38,7 @@
     $buffering-animation-duration: 2s;
     $buffering-animation-delay: $buffering-animation-duration * .1;
 
-    @keyframes fancy {
+    @keyframes #{$prefix}-fancy {
       0% {
         opacity: 0;
         transform: scale(1);
@@ -63,7 +63,7 @@
       }
     }
 
-    animation: fancy $buffering-animation-duration ease-in infinite;
+    animation: #{$prefix}-fancy $buffering-animation-duration ease-in infinite;
     background: url('../../assets/skin-modern/images/loader.svg') no-repeat center;
     display: inline-block;
     height: 2em;

src/scss/skin-modern/components/_closebutton.scss

@@ -4,7 +4,7 @@
 .#{$prefix}-ui-closebutton {
   @extend %ui-button;
 
-  @keyframes pulsate {
+  @keyframes #{$prefix}-pulsate {
     20% {
       transform: scale(1.1);
     }
@@ -27,6 +27,6 @@
   &:hover {
     @include svg-icon-shadow;
 
-    animation: pulsate 1s;
+    animation: #{$prefix}-pulsate 1s;
   }
 }

src/scss/skin-modern/components/_hugeplaybacktogglebutton.scss

@@ -3,7 +3,7 @@
 .#{$prefix}-ui-hugeplaybacktogglebutton {
   @extend %ui-button;
 
-  @keyframes fade-out {
+  @keyframes #{$prefix}-fade-out {
     from {
       opacity: 1;
       visibility: visible;
@@ -16,7 +16,7 @@
     }
   }
 
-  @keyframes fade-in {
+  @keyframes #{$prefix}-fade-in {
     from {
       opacity: 0;
       transform: scale(2);
@@ -28,7 +28,7 @@
     }
   }
 
-  @keyframes breathe {
+  @keyframes #{$prefix}-breathe {
     30% {
       transform: scale(1.1);
     }
@@ -53,21 +53,21 @@
     width: 100%;
 
     &:hover {
-      animation: breathe 3s ease-in-out infinite;
+      animation:  #{$prefix}-breathe 3s ease-in-out infinite;
     }
   }
 
   &.#{$prefix}-on {
     .#{$prefix}-image {
-      animation: fade-out $animation-duration cubic-bezier(.55, .055, .675, .19); // http://easings.net/de#easeInCubic
+      animation: #{$prefix}-fade-out $animation-duration cubic-bezier(.55, .055, .675, .19); // http://easings.net/de#easeInCubic
       transition: visibility 0s $animation-duration;
       visibility: hidden;
     }
   }
 
   &.#{$prefix}-off {
     .#{$prefix}-image {
-      animation: fade-in $animation-duration cubic-bezier(.55, .055, .675, .19); // http://easings.net/de#easeInCubic
+      animation:  #{$prefix}-fade-in $animation-duration cubic-bezier(.55, .055, .675, .19); // http://easings.net/de#easeInCubic
       visibility: visible;
     }
   }

src/scss/skin-modern/components/_hugereplaybutton.scss

@@ -16,7 +16,7 @@
     height: 100%;
     width: 100%;
 
-    @keyframes spin {
+    @keyframes #{$prefix}-spin {
       50% {
         transform: rotate(180deg) scale(1.1);
       }
@@ -27,7 +27,7 @@
     }
 
     &:hover {
-      animation: spin .5s ease-in;
+      animation: #{$prefix}-spin .5s ease-in;
     }
   }
 }