Animation css Fermé

Question

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: Guide de survie en cas d'attaque Zombie

ZombieGuide, le guide de survie en cas d'attaque zombie

Qui sommes-nous ?

Réglementation Zombie

Kit de survie

Psychologie du Zombie

Les zombies dans la culture populaire

Foire aux questions

Page détente

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);} }

animostab · Answer

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

animostab · Answer

Alors ca a marché ?
une réponse et un petit merci =  un brin de politesse

Méouédokornikar · Answer

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:

ZombieGuide, le guide de survie en cas d'attaque zombie

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é

animostab · Answer

ok

id = un seul div dans la page

class = tu peux en avoir plusieurs

tu peux mettre le sujet en résolu

Animation css

4 réponses

Discussions similaires