Animations css

Hamoudeeh Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
RAD ZONE Messages postés 5362 Statut Contributeur - 24 mars 2015 à 10:05

Bonjour,

j'aimerais faire une translation d'un objet avec css tout en faisant un temps d'arrêt de quelques secondes au milieu de la trajectoire.
Qui pourrai m'aider svp
Merci :)

Afficher la suite

1 réponse

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

Salut

voila un petit exemple vite fait avec une image , a toi de l adapter !

regarde du cote des @keyframes en css3 pour realiser ce que tu veux !

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">body {
      margin: 0;
      text-align: center;
    }

    .element{
      width: 600px;
      margin: auto;
      margin-top: 50px;
    }

    img.animation {
      border: 0;
      width: 50px;
      height: 50px;
    }
    /* debut anime */

    .animation{
      animation: animationFrames linear 10s;
      animation-iteration-count: 1;
      transform-origin: 50% 50%;
      animation-fill-mode: forwards;
      -webkit-animation: animationFrames linear 10s;
      -webkit-animation-iteration-count: 1;
      -webkit-transform-origin: 50% 50%;
      -webkit-animation-fill-mode: forwards;/*Chrome 16+, Safari 4+*/
      -moz-animation: animationFrames linear 10s;
      -moz-animation-iteration-count: 1;
      -moz-transform-origin: 50% 50%;
      -moz-animation-fill-mode: forwards;/*FF 5+*/
      -o-animation: animationFrames linear 10s;
      -o-animation-iteration-count: 1;
      -o-transform-origin: 50% 50%;
      -o-animation-fill-mode: forwards;/*pas encore implante*/
      -ms-animation: animationFrames linear 10s;
      -ms-animation-iteration-count: 1;
      -ms-transform-origin: 50% 50%;
      -ms-animation-fill-mode: forwards;/*IE 10+*/
    }

    @keyframes animationFrames{
      0% {
        opacity: 0;
        transform: translate(300px, 0px);
      }

      25% {
        opacity: 1;
        transform: translate(-25px, 0px);
      }

      75% {
        opacity: 1;
        transform: translate(-25px, 0px);
      }

      100% {
        opacity: 0;
        transform: translate(-300px, 0px);
      }
    }

    @-moz-keyframes animationFrames{
      0% {
        opacity: 0;
        -moz-transform: translate(300px, 0px);
      }

      25% {
        opacity: 1;
        -moz-transform: translate(-25px, 0px);
      }

      75% {
        opacity: 1;
        -moz-transform: translate(-25px, 0px);
      }

      100% {
        opacity: 0;
        -moz-transform: translate(-300px, 0px);
      }
    }

    @-webkit-keyframes animationFrames {
      0% {
        opacity: 0;
        -webkit-transform: translate(300px, 0px);
      }

      25% {
        opacity: 1;
        -webkit-transform: translate(-25px, 0px);
      }

      75% {
        opacity: 1;
        -webkit-transform: translate(-25px, 0px);
      }

      100% {
        opacity: 0;
        -webkit-transform: translate(-300px, 0px);
      }
    }

    @-o-keyframes animationFrames {
      0% {
        opacity: 0;
        -o-transform: translate(300px, 0px);
      }

      25% {
        opacity: 1;
        -o-transform: translate(-25px, 0px);
      }

      75% {
        opacity: 1;
        -o-transform: translate(-25px, 0px);
      }

      100% {
        opacity: 0;
        -o-transform: translate(-300px, 0px);
      }
    }

    @-ms-keyframes animationFrames {
      0% {
        opacity: 0;
        -ms-transform: translate(300px, 0px);
      }

      25% {
        opacity: 1;
        -ms-transform: translate(-25px, 0px);
      }

      75% {
        opacity: 1;
        -ms-transform: translate(-25px, 0px);
      }

      100% {
        opacity: 0;
        -ms-transform: translate(-300px, 0px);
      }
    }
    </style>
  </head>
  <body>
    <div class="element">
      <img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAA0ADQDASIAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAAAAQCAwUBBv/EABkBAAMBAQEAAAAAAAAAAAAAAAACBAMFAf/aAAwDAQACEAMQAAAB8VK1pdF5O2K2TVtNeN5oDWdrQznMK95SV9kCLSs+d1/NnSzmM259+e+rfn3eM5bl15vmnCmMACXQCPAAAD//xAAhEAACAwABBAMBAAAAAAAAAAABAgADERIEEBMxFCAhIv/aAAgBAQABBQKAbBXPFCmd61DQAaW/KjyPstWRRKhAFZk6dEW2yuywYssZjWfabg/mUL5XW8+XiWh00n3QcLaYjECtuTkFDaOdHZWgcYtvA/JIh6vV77N+n//EAB4RAAEEAwADAAAAAAAAAAAAAAEAAgMREBITICEy/9oACAEDAQE/AWxEi1xK4ervEPytnbJ4FWcMlDRSErEZWOHl/8QAHhEAAgICAgMAAAAAAAAAAAAAAQIAERASAxMgITH/2gAIAQIBAT8B2F1N52e6xyfYEWriE4ZLMKtAjA+X/8QAKBAAAQMDAQcFAQAAAAAAAAAAAQACERIhMRADICIyQXHBIzBCUVJh/9oACAEBAAY/At8yjgLC4uHuqCDbqto4/WnlBsVSvi4t5hK9JhDyYV+ZPbTYDSAJKmYIR2huBmFVQGuINyEZcnGrpr3RaHGP4iPzhVNv4UwGljTuQpCwERRkRn2f/8QAIRAAAgICAgIDAQAAAAAAAAAAAREAITFRQXEQYSCBkcH/2gAIAQEAAT8hhYKYS1DQjrxUHUWLAHfMQgUgqHwQFA7QswA9Mqyx7fgBokBnIpQwREgBcshKo/DMY6rEvuCO+h7lZBq4HcBQWRBwpWCK57EMJAC2RUZ9RC33A0YbJJ5MBAUTB/nial4sRkWGSZ4i1VXtuH4octR7DawvxCmxMJiGzGoBh8T1iYX0lRhErCo/8hh8AKPG/P8A/9oADAMBAAIAAwAAABDndnz8WAAKn4zwBzz/xAAdEQACAgIDAQAAAAAAAAAAAAABEQAhEDEggaHB/9oACAEDAQE/EEfqCq9yr06wjrdwjAO/sAwK2uCFryKpNjl//8QAHBEBAQEAAgMBAAAAAAAAAAAAAREAEDEgIUFR/9oACAECAQE/EEv001JvnLxUuoR0ZTA4S1ynvU4eny//xAAlEAEBAAMAAQMEAgMAAAAAAAABEQAhMUFRcYEQYZGhINGxwfD/2gAIAQEAAT8QxDRhHMAY4xiS7a+30SFpK3ruADcAKfl641FdQmv6w0VSHa9yedV/GLSAgcb5O3/uGA6AQb0GQ+iIjBI0W34zQEk1q6ac+MUcQ9p0fUdaxUNCcA8v3/rFQjaj04yvIM6bTY8r85QMbbOA0vV/WVHmE0nTNXNNqCgcV3+sAqKL1AAPEIZJyIbZbWHnzlPBWYpJ9z3FvhOoZ+47P94AADjhTLiLQWuWcA/H+MVy6PMl2edO/bFhIdOl0j24+THBYk4J4X19dxxUcEqKezlSa8V5iLKskWn7wRTQUxB6IeMZEXgEZeO9nvzxmgdqWbJYn8B8cfVxXT9f/9k="
      class="animation" alt="">
    </div>
  </body>
</html>

a+

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Animations css

1 réponse

Discussions similaires

Newsletters