Animation css
Méouédokornikar
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Alors voilà je vous explique mon problème, dans le cadre de mon DUT je dois réaliser un site web ( le thème importe peu ) et au fils des recherche je suis tombé sur comment faire des transition ou animation en css.
Le problème c'est que j'ai atteints mon maximum de compétence à la situation suivante:
Je peux faire avancer une image distinct lorsque la souris est dessus.
Et moi je voudrais que mes deux images soit animer lorsque la souris survol le titre.
Vous trouverez si dessus les parties que je pense nécessaire pour votre aide éventuelle.
Merci de votre réponse, Méouédokornikar
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="acceuil.css">
<link href='http://fonts.googleapis.com/css?family=Cherry+Swash' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Trade+Winds' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Nosifer' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Wallpoet|Iceland' rel='stylesheet' type='text/css'>
<title>
Guide de survie en cas d'attaque Zombie
</title>
</head>
<body>
<div id="corp">
</div>
<div id="tete">
<h2> ZombieGuide, le guide de survie en cas d'attaque zombie </h2>
<img class="zomb" src="img/zom.png">
<img class="hum" src="img/hum.png">
</div>
<div id="cou">
<ul>
<a href="nous.html"><li> Qui sommes-nous ?</li></a>
<a href="reg.html"><li> Réglementation Zombie </li></a>
<a href="kit.html"><li> Kit de survie </li></a>
<a href="psy.html"><li> Psychologie du Zombie </li></a>
<a href="cul.html"><li> Les zombies dans la culture populaire </li></a>
<a href="fac.html"><li> Foire aux questions </li></a>
<a href="det.html"><li> Page détente </li></a>
</ul>
</div>
<div id="pied">
</div>
</body>
</html>
css:
.zomb {
height: 90%;
width: 2%;
position: relative;
top: -58px;
right: 0px;
}
.hum {
height: 90%;
width: 2%;
position: relative;
top: -58px;
right: -1180px;
}
#tete img:hover, #tete img:focus {
animation-name: nim; /* nom de l'animation */
animation-duration: 2s; /* temps de l'animation (2s) */
animation-timing-function: linear; /* accelération de l'animation (constant) */
}
@keyframes nim {
0% {
animation-timing-function: linear;
transform: translateX(0px);}
50% {
animation-timing-function: linear;
transform: translateX(40px);}
100% {
animation-timing-function: linear;
transform: translateX(80px);}
}
Alors voilà je vous explique mon problème, dans le cadre de mon DUT je dois réaliser un site web ( le thème importe peu ) et au fils des recherche je suis tombé sur comment faire des transition ou animation en css.
Le problème c'est que j'ai atteints mon maximum de compétence à la situation suivante:
Je peux faire avancer une image distinct lorsque la souris est dessus.
Et moi je voudrais que mes deux images soit animer lorsque la souris survol le titre.
Vous trouverez si dessus les parties que je pense nécessaire pour votre aide éventuelle.
Merci de votre réponse, Méouédokornikar
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="acceuil.css">
<link href='http://fonts.googleapis.com/css?family=Cherry+Swash' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Trade+Winds' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Nosifer' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Wallpoet|Iceland' rel='stylesheet' type='text/css'>
<title>
Guide de survie en cas d'attaque Zombie
</title>
</head>
<body>
<div id="corp">
</div>
<div id="tete">
<h2> ZombieGuide, le guide de survie en cas d'attaque zombie </h2>
<img class="zomb" src="img/zom.png">
<img class="hum" src="img/hum.png">
</div>
<div id="cou">
<ul>
<a href="nous.html"><li> Qui sommes-nous ?</li></a>
<a href="reg.html"><li> Réglementation Zombie </li></a>
<a href="kit.html"><li> Kit de survie </li></a>
<a href="psy.html"><li> Psychologie du Zombie </li></a>
<a href="cul.html"><li> Les zombies dans la culture populaire </li></a>
<a href="fac.html"><li> Foire aux questions </li></a>
<a href="det.html"><li> Page détente </li></a>
</ul>
</div>
<div id="pied">
</div>
</body>
</html>
css:
.zomb {
height: 90%;
width: 2%;
position: relative;
top: -58px;
right: 0px;
}
.hum {
height: 90%;
width: 2%;
position: relative;
top: -58px;
right: -1180px;
}
#tete img:hover, #tete img:focus {
animation-name: nim; /* nom de l'animation */
animation-duration: 2s; /* temps de l'animation (2s) */
animation-timing-function: linear; /* accelération de l'animation (constant) */
}
@keyframes nim {
0% {
animation-timing-function: linear;
transform: translateX(0px);}
50% {
animation-timing-function: linear;
transform: translateX(40px);}
100% {
animation-timing-function: linear;
transform: translateX(80px);}
}
A voir également:
- Animation css
- Dp animation maker - Télécharger - Animation
- Logiciel d animation 2d gratuit - Télécharger - Divers Web & Internet
- Gpx 3d animation - Télécharger - Transports & Cartes
- Css download - Télécharger - HTML
- Background color css ✓ - Forum CSS
4 réponses
Bonjour
Comme c'est un cours et que tu dois apprendre je ne vais pas te donner le code tout cuit
l'explication:
- 2 div thumb et title
- définir la parenté des div dans le code html
- modifier le css d'un div avec la pseudo class :hover
quand la souris passe sur tumb, title prend la propriété css définie entre les {} grace au css qui suit
.thumb:hover .title {propriétés css}(si .title est descendant de .thumb)
.thumb:hover > .title {propriétés css}(si .title est fils de .thumb)
.thumb:hover + .title {propriétés css}(si .title est frère directement suivant de .thumb)
.thumb:hover ~ .title {propriétés css}(si .title est un frère suivant de .thumb)
voila par contre je ne me rappelle plus a partir de quelle version IE ca fonctionne mais comme @keyframe c'est la meme chose avec IE version antérieur ...
sinon tu fais ca en javascript mais css c'est bien
Comme c'est un cours et que tu dois apprendre je ne vais pas te donner le code tout cuit
l'explication:
- 2 div thumb et title
- définir la parenté des div dans le code html
- modifier le css d'un div avec la pseudo class :hover
quand la souris passe sur tumb, title prend la propriété css définie entre les {} grace au css qui suit
.thumb:hover .title {propriétés css}(si .title est descendant de .thumb)
.thumb:hover > .title {propriétés css}(si .title est fils de .thumb)
.thumb:hover + .title {propriétés css}(si .title est frère directement suivant de .thumb)
.thumb:hover ~ .title {propriétés css}(si .title est un frère suivant de .thumb)
voila par contre je ne me rappelle plus a partir de quelle version IE ca fonctionne mais comme @keyframe c'est la meme chose avec IE version antérieur ...
sinon tu fais ca en javascript mais css c'est bien
Salut, je suis sincèrement désolé de mon absence mais mes semaines son longue, et depuis mon message aujourd'hui c'est la première fois qu je touche à mon code.
Merci en tout cas
Pour l'avancer du code j'ai bien compris le font mais la forme ne suit pas.
Je voulais savoir si le faite que ce soi des identifiants ça changeait beaucoup que si c'était des class, car sur le div mon prof nous a dis de mettre des #id
Les changements que j'ai fais sont les suivants :
html:
<div id="tete">
<a href="acceuil.html"><h2> ZombieGuide, le guide de survie en cas d'attaque zombie </h2></a>
<div id="anim">
<img class="zomb" src="img/zom.png" alt="zombi">
<img class="hum" src="img/hum.png" alt="humain">
<img class="mil" src="img/mil.png" alt="militaire">
</div>
</div>
css:
#tete:hover > #anim, #tete:focus > #anim, {
animation-name: nim; /* nom de l'animation */
animation-duration: 2s; /* temps de l'animation (2s) */
animation-timing-function: linear; /* accelération de l'animation (constant) */
}
Merci de ton aide et encore désolé
Merci en tout cas
Pour l'avancer du code j'ai bien compris le font mais la forme ne suit pas.
Je voulais savoir si le faite que ce soi des identifiants ça changeait beaucoup que si c'était des class, car sur le div mon prof nous a dis de mettre des #id
Les changements que j'ai fais sont les suivants :
html:
<div id="tete">
<a href="acceuil.html"><h2> ZombieGuide, le guide de survie en cas d'attaque zombie </h2></a>
<div id="anim">
<img class="zomb" src="img/zom.png" alt="zombi">
<img class="hum" src="img/hum.png" alt="humain">
<img class="mil" src="img/mil.png" alt="militaire">
</div>
</div>
css:
#tete:hover > #anim, #tete:focus > #anim, {
animation-name: nim; /* nom de l'animation */
animation-duration: 2s; /* temps de l'animation (2s) */
animation-timing-function: linear; /* accelération de l'animation (constant) */
}
Merci de ton aide et encore désolé
