Animation css simultané des titres et du logo !

Bonjour,

J'aurais voulu savoir s'il était possible avec @keyframe en css, d'effectuer une animation simultanée sur des h3 et une image logo.

Cordialement
Fab64990

salut,
c'est tout à fait possible. Si tu as commencé quelque chose ou que tu as un bout de code, peut être qu'on pourra t'aider davantage.

<!-- LOGO -->
   <div class="mask">
	<a href="http://www.myactually.com">
	     <img class="logo" src="img/logo5060.png" />
	</a>
   </div>

<!-- Titre -->
<div class="col-md-4">
				<h3>Fil d'actualité</h3>
				<h3>Top Lecture</h3>

</div>

/*animation logo*/
.logo:hover{
  animation-duration: 2s;
  animation-direction: normal;
  transition-timing-function: ease-in;
  transition-delay: 5s;
  animation-name: logohover;
}

@keyframes logohover {
    0% {
      transform: rotate(0deg)      
    }
    25% {
      transform: rotate(7deg);
    }
    50% {
      transform: rotate(0deg);
    }
    75% {
      transform: rotate(-7deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  

.col-md-4 h3{
  color: #ebe200;
  text-shadow: 2px 4px 5px #62c5e4;
  font-family: 'Expletus Sans', sans-serif;
  animation-duration: 5s;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(2, 2, 2);
    transform: scale3d(2, 2, 2);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

Merci de jetter un oeil au mieux t'as directement le lien du site internet
Modifié par Fab64990 (29 May 2015 - 12:30)