Test

La boite a bois.pdf hochladen

fade In

@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }

<div style="font-size: 2em; font-weight: bold; border: 2px dotted grey; animation-name: fadeIn; animation-duration: 15s;">

fadeIn

#einstieg { font: bold 3.5em 'Alfa Slab One'; text-align: center; color: rgb(80, 109, 44); text-shadow: 4px 4px 10px #425b24; margin: 0.3em;
	animation: mymove 5s infinite; -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ }
.blink_me { animation: mymove 5s linear infinite; }
@keyframes mymove { 50% { opacity: 0; } }
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove { 50% { opacity: 0; } }
@keyframes einaus { from { visibility: hidden; } to { visibility: visible; } }
@keyframes ausein { from { visibility: visible; } to { visibility: hidden; } }

Animationstest

unendlich blinken

id=einstieg

3x wiederholen

animation-fill-mode: forwards; animation-name: mymove; animation-duration: 3s; animation-iteration-count: 3;

3x wiederholen ohne fill mode forward

animation-name: mymove; animation-duration: 3s; animation-iteration-count: 3;

hart ein und aus

animation-name: einaus; animation-duration: 3s; animation-iteration-count: 3;

animation-name: ausein; animation-duration: 3s; animation-iteration-count: 3;

toggle

.m-fadeOut { visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms; }
.m-fadeIn { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms; }
.thing  { margin: 20px; padding: 20px; background: lightyellow; border: 1px solid green; }
.thing2 { opacity: 0; } }

• https://css-tricks.com/snippets/css/toggle-visibility-when-hiding-elements/

I toggle m-fadeOut

I toggle m-fadeIn

delayed Show

@keyframes delayedShow { to { visibility: visible; } }
.delayedShow { visibility: hidden; animation: 0s linear 3s forwards delayedShow; }

Hey, I'm here!