Animacje CSS

Ciekawy efekt animacji możemy uzyskać wykorzystując stan :hover oraz transform i transition. W przykładzie obok, po najechaniu kursorem na szary box, kropki wydłużają się w osi X i Y.

Dla zachowania ich ładnego kształtu została równeiż użyta opcja border-radius z przeliczaniem górnego/dolnego w zmianie osi X i przeliczenie lewy/prawy w zmianie osi Y.


          .elem { 

             border-radius: 5rem;

             transition: transform .8s ease-in-out, border-radius .8s ease-in-out;

          }


          .parent:hover .elem {

             transform: scaleY(4);

             border-radius: 5rem/calc(5rem/4);

          }

@keyframes

nadajemy nazwę np movingSquare

ustawiamy poczatkowy [0% lub from] i ostateczny [100% lub to] stan elementu, oraz ewentualne pośrednie stany


        .rotated {

             animation: rotation 1s infinite linear;

        }

        @keyframes rotation {

             from {

                  transform: rotate(0deg);

             }

             to {

                  transform: rotate(360deg);

             }

        }


        .floated {

             animation: float 1s infinite alternate cubic-bezier(.77, .28,.42,.93)

        }

        @keyframes rotation {

             from {

                  transform: rotate(0deg);

             }

             to {

                  transform: rotate(360deg);

             }

        }

css

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur facere ipsa quisquam, totam nulla vitae omnis incidunt earum assumenda magni, dignissimos porro, quam tenetur possimus pariatur delectus! Neque, temporibus officia.

More about css

js

More about js