Merge branch 'ENG-4396_port_RichTextCarousel_styles_from_CR' of https://github.com/comicrelief/component-library into ENG-4396_port_RichTextCarousel_styles_from_CR

Author: AndyEPhipps

src/components/Atoms/AmbientVideo/AmbientVideo.style.js

@@ -1,7 +1,19 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 import zIndex from '../../../theme/shared/zIndex';
 
+// This is so that the button is initially visible, then afterwards
+// it's only seen again on hover
+const playPauseIntro = keyframes`
+  0%,
+  93.75% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 0;
+  }
+`;
+
 const Wrapper = styled.div`
   width: 100%;
   height: 100%;
@@ -78,7 +90,8 @@ const PlayPauseButton = styled.button`
   align-items: center;
   justify-content: center;
   opacity: 0;
-  transition: opacity 0.2s ease 2s;
+  animation: ${playPauseIntro} 3s ease;
+  transition: opacity 0.2s ease 3s;
   ${zIndex('high')};
 
   // Play icon is shifted to the right slightly as it

src/components/Molecules/PictureOrVideo/__snapshots__/PictureOrVideo.test.js.snap

@@ -62,8 +62,10 @@ exports[`renders AmbientVideo when video props are provided correctly 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   opacity: 0;
-  -webkit-transition: opacity 0.2s ease 2s;
-  transition: opacity 0.2s ease 2s;
+  -webkit-animation: diKSqD 3s ease;
+  animation: diKSqD 3s ease;
+  -webkit-transition: opacity 0.2s ease 3s;
+  transition: opacity 0.2s ease 3s;
   z-index: 3;
 }