animation dans titre de catégorie ne fonctionne pas (phbb2)

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

animation dans titre de catégorie ne fonctionne pas (phbb2) Empty animation dans titre de catégorie ne fonctionne pas (phbb2)

Message par Riizbaie Dim 6 Jan 2019 - 20:42

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 5 janvier 2019
Lien du forum : http://bulble-moon.forumactif.com/

Description du problème

Bonjour, bonsoir (et bonne année à tous) !!! santa

je suis actuellement entrain de coder un forum rp dont le thème principal est la sorcellerie. Donc, je m'amuse à mettre des animations en css3 dans les liens hypertextes et dans les catégories. Et donc voilà mon soucis...

En faisant des recherches sur les animations, j'ai constaté qu'on pouvait bah en faire plus que changer le texte ou de forme. il suffit pour ça d'utiliser @keyframes. J'ai donc suivit un des tutoriels qu'on trouve sur le web en codant sur L'application LIVE CSS de Chrome, l’aperçut me plait bien. Je vais mettre le css dans la feuille de style pour le titre de catégorie et là, ça ne fonctionne plus... (désolée pour le roman).

Vérification du JS : l'erreur ne vient pas des deux scripts que j'ai sur le forum.
Vérification du CSS : j'ai déjà supprimé le css que j'avais installé mais l'erreur ne vient pas de là.
Vérification des templates : J'ai remis les templates de base et l'erreur ne vient pas de là non.

Alors, j'aimerai savoir où ai-je fait une erreur. Je vous joints le css et la template modifier.

CSS titre catégorie
Code:
.catnom_tour{
height:40px;
overflow:hidden;
background-color:#cdcbc5;
  margin-bottom:2px;
}

catnom{
text-align:center;
height:40px;
padding-top:5px;
text-align:center;
display:block;
background-color:#cdcbc5;
}

.catnom_tour .secondarytitle h2{
text-transform:uppercase;
color:#fff;
font-size:15px;
}



.secondarytitle:hover,
.secondarytitle:focus {
   -webkit-animation-name: spaceboots;
   -webkit-animation-duration: 0.8s;
   -webkit-transform-origin:50% 50%;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
        animation-name: spaceboots;
   animation-duration: 0.8s;
   transform-origin:50% 50%;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
        -moz-animation-name: spaceboots;
   -moz-animation-duration: 0.8s;
   -moz-transform-origin:50% 50%;
   -moz-animation-iteration-count: infinite;
   -moz-animation-timing-function: linear;
}

@keyframes spaceboots {
   0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
   10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
   20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
   30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
   40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
   50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
   60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
   70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
   80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
   90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
   100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
   0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
   10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
   20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
   30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
   40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
   50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
   60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
   70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
   80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
   90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
   100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
   0% { transform: translate(2px, 1px) rotate(0deg); }
   10% { transform: translate(-1px, -2px) rotate(-1deg); }
   20% { transform: translate(-3px, 0px) rotate(1deg); }
   30% { transform: translate(0px, 2px) rotate(0deg); }
   40% { transform: translate(1px, -1px) rotate(1deg); }
   50% { transform: translate(-1px, 2px) rotate(-1deg); }
   60% { transform: translate(-3px, 1px) rotate(0deg); }
   70% { transform: translate(2px, 1px) rotate(-1deg); }
   80% { transform: translate(-1px, -1px) rotate(1deg); }
   90% { transform: translate(2px, 2px) rotate(0deg); }
   100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.catnom_tour .secondarytitle h2::after {
    border-top: 1px solid #fff;
    color: #fff;
    content: "un sous titre";
    display: block;
    font-size: 8px;
    font-style: oblique;
    font-weight: 400;
    letter-spacing: 10px;
    line-height: 16px;
    margin: 3px auto 0;
    text-shadow: 1px 1px 0 var(--couleur_0d);
    text-transform: uppercase;
    width: 300px;
}

Template de la catégorie modifier
Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="forumline">
<div class="catnom_tour">
<catnom class="secondarytitle">&nbsp;{catrow.tablehead.L_FORUM}</catnom></div>
      
   
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   
      
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      
   <!-- END cathead -->


 
   <!-- BEGIN forumrow -->
<div class="forum">       
 <div class="gauche">
<div class="forum-stat">
          <div>{catrow.forumrow.TOPICS} <span>S</span></div>
          <div>{catrow.forumrow.POSTS} <span>M</span></div>
        </div>
  <div class="forum-image">
      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
  </div>
 </div> 
     
<div class="centre">
  <div class="forum-titre"><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
            </h{catrow.forumrow.LEVEL}>
    </div> 
     
    <div class="description">
      <div class="desc">{catrow.forumrow.FORUM_DESC}</div>
      <div class="forum-lien">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
    </div>
</div>

<div class="droite">
  <div class="der-forum">
            <div class="forum-av">
          <!-- BEGIN avatar -->
         
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
          </div>
    <div class="der"><div>{catrow.forumrow.LAST_POST}</div></div>
  </div>     
</div>
 
</div>

       
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Merci beaucoup Very Happy
Riizbaie

Riizbaie
***

Messages : 104
Inscrit(e) le : 27/09/2016

https://elastic-fantastic.forumsrpg.com/
Riizbaie a été remercié(e) par l'auteur de ce sujet.

animation dans titre de catégorie ne fonctionne pas (phbb2) Empty Re: animation dans titre de catégorie ne fonctionne pas (phbb2)

Message par Riizbaie Mar 8 Jan 2019 - 13:37

coucou,

j'ai toujours besoin d'une explication pour comprendre l'erreur.
ayez pitié de moi svp
Riizbaie

Riizbaie
***

Messages : 104
Inscrit(e) le : 27/09/2016

https://elastic-fantastic.forumsrpg.com/
Riizbaie a été remercié(e) par l'auteur de ce sujet.

animation dans titre de catégorie ne fonctionne pas (phbb2) Empty Re: animation dans titre de catégorie ne fonctionne pas (phbb2)

Message par Chacha Lun 14 Jan 2019 - 9:22

animation dans titre de catégorie ne fonctionne pas (phbb2) UmaslZ4Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

animation dans titre de catégorie ne fonctionne pas (phbb2) Empty Re: animation dans titre de catégorie ne fonctionne pas (phbb2)

Message par Chacha Mar 15 Jan 2019 - 9:42

animation dans titre de catégorie ne fonctionne pas (phbb2) 8djze9qBonjour,

Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement !

Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum