Call us in Camas (360) 210-5658Call us in Kennewick (123) 456-7890
 (360) 210-5658

Test Animations

Animation 1

Code
.bloom-container:hover .bloom{
    animation-name: flower-bloom;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes flower-bloom {
  from {clip-path: polygon(48% 100%, 0 83%, 41% 90%, 0 31%, 44% 85%, 18% 0, 47% 84%, 50% 0, 51% 83%, 84% 2%, 55% 83%, 100% 30%, 58% 89%, 100% 82%, 52% 100%);}
  to {clip-path: polygon(0 100%, 0 83%, 0 62%, 0 31%, 0 0, 18% 0, 35% 0, 50% 0, 65% 0, 82% 0, 100% 0, 100% 30%, 100% 61%, 100% 82%, 100% 100%);}
}

Animation 2

Code
.bloom-container-2:hover .bloom-2{
    animation-name: flower-bloom-2;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes flower-bloom-2 {
  0% {clip-path: polygon(44% 100%, 54% 100%, 57% 94%, 53% 90%, 55% 83%, 51% 86%, 53% 76%, 50% 82%, 49% 76%, 47% 81%, 44% 77%, 46% 86%, 42% 84%, 44% 90%, 41% 94%);}
  85% {clip-path: polygon(31% 100%, 68% 100%, 92% 85%, 83% 82%, 100% 31%, 77% 38%, 77% 19%, 64% 35%, 52% 2%, 38% 33%, 25% 19%, 24% 38%, 0 31%, 17% 81%, 10% 84%);}
  100%{clip-path: polygon(0 100%, 100% 100%, 100% 82%, 100% 77%, 100% 30%, 100% 0, 83% 0, 68% 0, 50% 0, 33% 0, 18% 0, 0 0, 0 31%, 0 77%, 0 82%);}
}

Animation 3

Code
.bloom-container-3:hover .bloom-3{
    animation-name: flower-bloom-3;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes flower-bloom-3 {
  0% {clip-path: polygon(44% 100%, 54% 100%, 57% 94%, 53% 90%, 55% 83%, 51% 86%, 53% 76%, 50% 82%, 49% 76%, 47% 81%, 44% 77%, 46% 86%, 42% 84%, 44% 90%, 41% 94%);}
  75% {clip-path: polygon(31% 100%, 68% 100%, 92% 85%, 83% 82%, 100% 31%, 77% 38%, 77% 19%, 64% 35%, 52% 2%, 38% 33%, 25% 19%, 24% 38%, 0 31%, 17% 81%, 10% 84%);}
  100%{clip-path: polygon(0 80%, 0 100%, 100% 100%, 100% 82%, 100% 78%, 100% 29%, 100% 0, 83% 0, 66% 0, 50% 0, 35% 0, 20% 0, 0 0, 0 31%, 0 73%);}
}

Animation 4

Code
.bloom-container-4:hover .bloom-4{
    animation-name: flower-bloom-4;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes flower-bloom-4 {
  0% {clip-path: circle(0.0% at 50% 52%);}
  100%{clip-path: circle(61.4% at 50% 50%);}
}

Animation 5

Code
.bloom-container-5:hover .bloom-5{
    animation-name: flower-bloom-5;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.bloom-container-5:hover .bloom-5 > img{
    animation-name: flower-bloom-5-img;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes flower-bloom-5 {
  0% {clip-path: circle(0.0% at 50% 52%);}
  100%{clip-path: circle(61.4% at 50% 50%);}
}
@keyframes flower-bloom-5-img {
  0% {transform: scale(1.5);opacity:0;}
  100%{transform: scale(1);opacity:1;}
}

sethsandbox.fm1.dev