Webdesign und Web Entwicklung

Websites mit CMS & individuelle Web Anwendungen. Planung, Erstellung, Verwaltung, Analyse und Support, professionell und zu fairen Preisen. Jedes Projekt individuell für Ihr Unternehmen.

CSS Animation mit Transition

Schöne CSS Animation mit Transition, einfach erstellt und doch sehr effektiv.  Kann auch einen Button sehr verschönern und aufpeppen.

langsam → schnell
langsam → langsam

Hier der Code, entdeckt auf selfhtml.org

#div1, #div2 {  
width: 10em;    
height: 3em;  
margin: 1em;  
max-width: 80vw;  
overflow: hidden;  
line-height: 3em;  
text-align: center;  
background-color: gold;  
}  
#div1:hover, #div2:hover {  
background-color: red;  
width: 20em;  
}  
#div1 {}  
#div1:hover {  
transition: all ease 2.5s;  
}  
#div2 {  
transition: all ease 2.5s;  
}  
#div2:hover {}  
main#div3 {  
transition: all ease 2.5s;  
}

Der Code kommt in die style.css Datei, oder was immer ihr nutzt.

In den Content kommt

<div id="div1">langsam → schnell</div>  
<div id="div2">langsam → langsam</div>  

Danach sollte es eigentlich schön funktionieren.

  • Anzeige

    Anzeige
    Stark reduzierte Produkte bei Amazon.

    Will ich sehen
  • Leistungen
  • Website Änderungen
  • Website Wartung
  • Websites mit CMS
  • Website Verwaltung
  • WordPress Websites
  • Website Analyse
  • Technishes SEO
  • WordPress Erfahrung seit 2006
  • Kontakt
    info@seot.de