Auf Thema antworten 2026

Beitrag

<blockquote data-quote="dn3d_fanboy" data-source="post: 2365527" data-attributes="member: 547472">Hallo Manfred und vielen Dank für die Links,leider steige ich da jetzt nicht ganz durch.Ich habe allerdings schon gemerkt, dass die Prefixes fehlten. Nach der Änderung startet unter Chrome zwar die Transition, der Content fällt danach (also bei opacity:1) wieder auf den Ausgangszustand (opycity: 0) zurück.Hier nochmal der Link:[CODE]@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }.fade-in{opacity:0;/* make things invisible upon start *//*animation*/-webkit-animation:fadeIn ease-in 1;&nbsp;&nbsp; -moz-animation:fadeIn ease-in 1;&nbsp; &nbsp; -ms-animation:fadeIn ease-in 1;&nbsp; &nbsp;&nbsp; -o-animation:fadeIn ease-in 1;&nbsp; &nbsp; &nbsp; &nbsp; animation:fadeIn ease-in 1;/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */animation-fill-mode:forwards;/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*//*animation-duration*/-webkit-animation-duration:2s;&nbsp;&nbsp; -moz-animation-duration:2s;&nbsp; &nbsp; -ms-animation-duration:2s;&nbsp; &nbsp;&nbsp; -o-animation-duration:2s;&nbsp; &nbsp; &nbsp; &nbsp; animation-duration:2s;/*animation-delay*/-webkit-animation-delay:1.5s;&nbsp;&nbsp; -moz-animation-delay:1.5s;&nbsp; &nbsp; -ms-animation-delay:1.5s;&nbsp; &nbsp;&nbsp; -o-animation-delay:1.5s;&nbsp; &nbsp; &nbsp; &nbsp; animation-delay:1.5s;}.fade-in2{opacity:0;/* make things invisible upon start *//*animation*/-webkit-animation:fadeIn ease-in 1;&nbsp;&nbsp; -moz-animation:fadeIn ease-in 1;&nbsp; &nbsp; -ms-animation:fadeIn ease-in 1;&nbsp; &nbsp;&nbsp; -o-animation:fadeIn ease-in 1;&nbsp; &nbsp; &nbsp; &nbsp; animation:fadeIn ease-in 1;/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */animation-fill-mode:forwards;/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*//*animation-duration*/-webkit-animation-duration:2.5s;&nbsp;&nbsp; -moz-animation-duration:2.5s;&nbsp; &nbsp; -ms-animation-duration:2.5s;&nbsp; &nbsp;&nbsp; -o-animation-duration:2.5s;&nbsp; &nbsp; &nbsp; &nbsp; animation-duration:2.5s;/*animation-delay*/-webkit-animation-delay:3.5s;&nbsp;&nbsp; -moz-animation-delay:3.5s;&nbsp; &nbsp; -ms-animation-delay:3.5s;&nbsp; &nbsp;&nbsp; -o-animation-delay:3.5s;&nbsp; &nbsp; &nbsp; &nbsp; animation-delay:3.5s;}.fade-in3{opacity:0;/* make things invisible upon start *//*animation*/-webkit-animation:fadeIn ease-in 1;&nbsp;&nbsp; -moz-animation:fadeIn ease-in 1;&nbsp; &nbsp; -ms-animation:fadeIn ease-in 1;&nbsp; &nbsp;&nbsp; -o-animation:fadeIn ease-in 1;&nbsp; &nbsp; &nbsp; &nbsp; animation:fadeIn ease-in 1;/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */animation-fill-mode:forwards;/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*//*animation-duration*/-webkit-animation-duration:3s;&nbsp;&nbsp; -moz-animation-duration:3s;&nbsp; &nbsp; -ms-animation-duration:3s;&nbsp; &nbsp;&nbsp; -o-animation-duration:3s;&nbsp; &nbsp; &nbsp; &nbsp; animation-duration:3s;/*animation-delay*/-webkit-animation-delay:4.5s;&nbsp;&nbsp; -moz-animation-delay:4.5s;&nbsp; &nbsp; -ms-animation-delay:4.5s;&nbsp; &nbsp;&nbsp; -o-animation-delay:4.5s;&nbsp; &nbsp; &nbsp; &nbsp; animation-delay:4.5s;}[/CODE]<a href="http://jb-design-for-web.de/test/css3-js/css-test.html" target="_blank">http://jb-design-for-web.de/test/css3-js/css-test.html</a></blockquote>

[QUOTE="dn3d_fanboy, post: 2365527, member: 547472"] Hallo Manfred und vielen Dank für die Links, leider steige ich da jetzt nicht ganz durch. Ich habe allerdings schon gemerkt, dass die Prefixes fehlten. Nach der Änderung startet unter Chrome zwar die Transition, der Content fällt danach (also bei opacity:1) wieder auf den Ausgangszustand (opycity: 0) zurück. Hier nochmal der Link: [CODE]@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } .fade-in{ opacity:0; /* make things invisible upon start */ /*animation*/ -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; -ms-animation:fadeIn ease-in 1; -o-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ /*animation-duration*/ -webkit-animation-duration:2s; -moz-animation-duration:2s; -ms-animation-duration:2s; -o-animation-duration:2s; animation-duration:2s; /*animation-delay*/ -webkit-animation-delay:1.5s; -moz-animation-delay:1.5s; -ms-animation-delay:1.5s; -o-animation-delay:1.5s; animation-delay:1.5s; } .fade-in2{ opacity:0; /* make things invisible upon start */ /*animation*/ -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; -ms-animation:fadeIn ease-in 1; -o-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ /*animation-duration*/ -webkit-animation-duration:2.5s; -moz-animation-duration:2.5s; -ms-animation-duration:2.5s; -o-animation-duration:2.5s; animation-duration:2.5s; /*animation-delay*/ -webkit-animation-delay:3.5s; -moz-animation-delay:3.5s; -ms-animation-delay:3.5s; -o-animation-delay:3.5s; animation-delay:3.5s; } .fade-in3{ opacity:0; /* make things invisible upon start */ /*animation*/ -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; -ms-animation:fadeIn ease-in 1; -o-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ /*animation-duration*/ -webkit-animation-duration:3s; -moz-animation-duration:3s; -ms-animation-duration:3s; -o-animation-duration:3s; animation-duration:3s; /*animation-delay*/ -webkit-animation-delay:4.5s; -moz-animation-delay:4.5s; -ms-animation-delay:4.5s; -o-animation-delay:4.5s; animation-delay:4.5s; }[/CODE] [url]http://jb-design-for-web.de/test/css3-js/css-test.html[/url] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?