Selbstablaufende Animationen mit keyframe

Ein- und ausblendender Text

olivergast.de

@-webkit-keyframes blink {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}

@-moz-keyframes blink {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}

@keyframes blink {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}

.text {
-webkit-animation-name: blink;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blink;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
animation-name: blink;
animation-duration: 5s;
animation-iteration-count: infinite;
}

Ein- und ausblendender Text mit Skalierung

olivergast.de

@-webkit-keyframes pulse {
0% { opacity: .2; -webkit-transform: scale(1.0); }
50% { opacity: 1; -webkit-transform: scale(1.2); }
100% { opacity: .2; -webkit-transform: scale(1.0); }
}

@-moz-keyframes pulse {
0% { opacity: .2; -moz-transform: scale(1.0); }
50% { opacity: 1; -moz-transform: scale(1.2); }
100% { opacity: .2; -moz-transform: scale(1.0); }
}

@keyframes pulse {
0% { opacity: .2; transform: scale(1.0); }
50% { opacity: 1; transform: scale(1.2); }
100% { opacity: .2; transform: scale(1.0); }
}

.text {
-webkit-animation-name: pulse;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: pulse;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
animation-name: pulse;
animation-duration: 10s;
animation-iteration-count: infinite;
}

Box wird gedreht und ändert die Farbe

@-webkit-keyframes pulse_box {
0% { background: orange; -webkit-transform: rotate(0deg); }
25% { background: blue; -webkit-transform: rotate(3deg); }
50% { background: red; -webkit-transform: rotate(0deg); }
75% { background: yellow; -webkit-transform: rotate(-5deg); }
100% { background: orange; -webkit-transform: rotate(0deg); }
}

@-moz-keyframes pulse_box {
0% { background: orange; -moz-transform: rotate(0deg); }
25% { background: blue; -moz-transform: rotate(3deg); }
50% { background: red; -moz-transform: rotate(0deg); }
75% { background: yellow; -moz-transform: rotate(-5deg); }
100% { background: orange; -moz-transform: rotate(0deg); }
}

@keyframes pulse_box {
0% { background: orange; transform: rotate(0deg); }
25% { background: blue; transform: rotate(3deg); }
50% { background: red; transform: rotate(0deg); }
75% { background: yellow; transform: rotate(-5deg); }
100% { background: orange; transform: rotate(0deg); }
}

.box {
-webkit-animation-name: pulse_box;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: pulse_box;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
animation-name: pulse_box;
animation-duration: 10s;
animation-iteration-count: infinite;
}

Box verschiebt sich

@-webkit-keyframes slide_box {
0% { left: 0px;}
25% { left: 150px; }
40% { left: 150px; }
60% { left: -150px; }
75% { left: -150px; }
100% { left: 0px; }
}

@-moz-keyframes slide_box {
0% { left: 0px;}
25% { left: 150px; }
40% { left: 150px; }
60% { left: -150px; }
75% { left: -150px; }
100% { left: 0px; }
}

@keyframes slide_box {
0% { left: 0px;}
25% { left: 150px; }
40% { left: 150px; }
60% { left: -150px; }
75% { left: -150px; }
100% { left: 0px; }
}

.box {
-webkit-animation-name: slide_box;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: slide_box;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
animation-name: slide_box;
animation-duration: 5s;
animation-iteration-count: infinite;
}

Bild wippt hin und her

@-webkit-keyframes bild_rotate {
0% { -webkit-transform: rotate(0deg) }
25% { -webkit-transform: rotate(10deg) }
75% { -webkit-transform: rotate(-10deg) }
100% { -webkit-transform: rotate(0deg) }
}

@-moz-keyframes bild_rotate {
0% { -moz-transform: rotate(0deg) }
25% { -moz-transform: rotate(10deg) }
75% { -moz-transform: rotate(-10deg) }
100% { -moz-transform: rotate(0deg) }
}

@keyframes bild_rotate {
0% { transform: rotate(0deg) }
25% { transform: rotate(10deg) }
75% { transform: rotate(-10deg) }
100% { transform: rotate(0deg) }
}

.img {
-webkit-animation-name: bild_rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: bild_rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
animation-name: bild_rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
}

Bild wird gespiegelt

@-webkit-keyframes bild_spiegel {
0% { -webkit-transform: scaleX(1) }
25% { -webkit-transform: scaleX(1) }
50% { -webkit-transform: scaleX(-1) }
75% { -webkit-transform: scaleX(1) }
100% { -webkit-transform: scaleX(1) }
}

@-moz-keyframes bild_spiegel {
0% { -moz-transform: scaleX(1) }
25% { -moz-transform: scaleX(1) }
50% { -moz-transform: scaleX(-1) }
75% { -moz-transform: scaleX(1) }
100% { -moz-transform: scaleX(1) }
}

@keyframes bild_spiegel {
0% { transform: scaleX(1) }
25% { transform: scaleX(1) }
50% { transform: scaleX(-1) }
75% { transform: scaleX(1) }
100% { transform: scaleX(1) }
}

.img {
-webkit-animation-name: bild_spiegel;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: bild_spiegel;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
animation-name: bild_spiegel;
animation-duration: 2s;
animation-iteration-count: infinite;
}

Leuchtreklame

olivergast.de

@-webkit-keyframes neon {
0% { text-shadow: 0; }
50% { text-shadow: 0 0 20px #ffffff, 2px 2px 10px #ffffff,
2px 2px 10px #ff00de, 2px 2px 40px #ff00de,
2px 2px 70px #ff00de, 2px 2px 80px #ff00de,
2px 2px 100px #ff00de; }
100% { text-shadow: 0; }
}

@-moz-keyframes neon {
0% { text-shadow: 0; }
50% { text-shadow: 0 0 20px #ffffff, 2px 2px 10px #ffffff,
2px 2px 10px #ff00de, 2px 2px 40px #ff00de,
2px 2px 70px #ff00de, 2px 2px 80px #ff00de,
2px 2px 100px #ff00de; }
100% { text-shadow: 0; }
}

@keyframes neon {
0% { text-shadow: 0; }
50% { text-shadow: 0 0 20px #ffffff, 2px 2px 10px #ffffff,
2px 2px 10px #ff00de, 2px 2px 40px #ff00de,
2px 2px 70px #ff00de, 2px 2px 80px #ff00de,
2px 2px 100px #ff00de; }
100% { text-shadow: 0; }
}

.text {
color: #fff;
background: #000;
font-size: 72px;
font-weight: bold;
padding: 40px;
overflow: hidden;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-animation-name: neon;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: neon;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
animation-name: neon;
animation-duration: 5s;
animation-iteration-count: infinite;
}

Text mit hinterlegtem Farbverlauf (nur Webkit-Browser)

<div class="box">
<p class="text">olivergast.de</p>
</div>

@-webkit-keyframes sliding_text {
0% { background-position: -500px 0; }
100% { background-position: 500px 0; }
}

.box {
margin: 20px auto;
padding: 10px;
-webkit-border-radius: 10px;
background: #ddd;
overflow: hidden;
width: 500px;
box-shadow: inset 5px 5px 5px #bbb;
}

.box .text {
width: 1000px;
font-size: 48px;
font-weight: bold;
color: #000;
margin: 0 0 0 -250px;
padding: 10px;
background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),
color-stop(0.4, #4d4d4d),color-stop(0.5, white),
color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));
background: -webkit-linear-gradient(left, #4d4d4d 0%,#4d4d4d 40%,#ffffff 50%,
#4d4d4d 60%,#4d4d4d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation-name: sliding_text;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

Logo-Animation

@-webkit-keyframes logo_fade {
0% { opacity: 1; -webkit-transform: scale(1.0) }
25% { opacity: 0.5; -webkit-transform: scale(1.0) }
50% { opacity: 1; -webkit-transform: scale(1.1) }
75% { opacity: 0.5; -webkit-transform: scale(1.0) }
100% { opacity: 1; -webkit-transform: scale(1.0) }
}

@-moz-keyframes logo_fade {
0% { opacity: 1; -moz-transform: scale(1.0) }
25% { opacity: 0.5; -moz-transform: scale(1.0) }
50% { opacity: 1; -moz-transform: scale(1.1) }
75% { opacity: 0.5; -moz-transform: scale(1.0) }
100% { opacity: 1; -moz-transform: scale(1.0) }
}

@keyframes logo_fade {
0% { opacity: 1; transform: scale(1.0) }
25% { opacity: 0.5; transform: scale(1.0) }
50% { opacity: 1; transform: scale(1.1) }
75% { opacity: 0.5; transform: scale(1.0) }
100% { opacity: 1; transform: scale(1.0) }
}

.img {
-webkit-animation-name: logo_fade;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: logo_fade;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
animation-name: logo_fade;
animation-duration: 5s;
animation-iteration-count: infinite;
}

Zitterndes WordPress-Logo

@-webkit-keyframes zittern {
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); }
}

@-moz-keyframes zittern {
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); }
}

@keyframes zittern {
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); }
}

.img {
-webkit-animation-name: zittern;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: zittern;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: zittern;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

Ein animiertes Bild

<div class="box">
<div class="img_strahlen"><img src="image_strahlen.png" alt="" /></div>
<div class="img_bg"><img src="wordpress_logo.png" alt="" /></div>
</div>

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@-webkit-keyframes img_bg {
0% { -webkit-transform: scale(1) rotate(0deg); }
25% { -webkit-transform: scale(1) rotate(0deg); }
50% { -webkit-transform: scale(1.5) rotate(0deg); }
75% { -webkit-transform: scale(1.5) rotate(360deg); }
100% { -webkit-transform: scale(1) rotate(360deg); }
}

@-moz-keyframes img_bg {
0% { -webkit-transform: scale(1) rotate(0deg); }
25% { -webkit-transform: scale(1) rotate(0deg); }
50% { -webkit-transform: scale(1.5) rotate(0deg); }
75% { -webkit-transform: scale(1.5) rotate(360deg); }
100% { -webkit-transform: scale(1) rotate(360deg); }
}

@keyframes img_bg {
0% { -webkit-transform: scale(1) rotate(0deg); }
25% { -webkit-transform: scale(1) rotate(0deg); }
50% { -webkit-transform: scale(1.5) rotate(0deg); }
75% { -webkit-transform: scale(1.5) rotate(360deg); }
100% { -webkit-transform: scale(1) rotate(360deg); }
}

.box {
position: relative;
height: 300px;
width: 300px;
background: #f7ff1c;
background-image: -ms-radial-gradient(right bottom, circle cover, #F7FF1C 0%, #FF7912 100%);
background-image: -moz-radial-gradient(right bottom, circle cover, #F7FF1C 0%, #FF7912 100%);
background-image: -o-radial-gradient(right bottom, circle cover, #F7FF1C 0%, #FF7912 100%);
background-image: -webkit-gradient(radial, right bottom, 0, right bottom, 1020, color-stop(0, #F7FF1C), color-stop(1, #FF7912));
background-image: -webkit-radial-gradient(right bottom, circle cover, #F7FF1C 0%, #FF7912 100%);
background-image: radial-gradient(right bottom, circle cover, #F7FF1C 0%, #FF7912 100%);
margin: 0 auto;
border: 10px solid #fff;
-moz-border-radius: 20px;
border-radius: 20px;
box-shadow: 1px 1px 5px #888;
overflow: hidden;
}

.box .img_bg {
position: absolute;
top: 22px;
left: 22px;
-webkit-animation-name: img_bg;
-webkit-animation-duration: 25s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: img_bg;
-moz-animation-duration: 25s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: img_bg;
animation-duration: 25s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.box .img_strahlen {
position: absolute;
top: -100px;
left: -100px;
opacity: 0.5;
-webkit-animation-name: spin;
-webkit-animation-duration: 50s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 50s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: spin;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

Ladeanimation (hier gefunden: Quelle)

<div class="box">
<span></span>
<span></span>
<span></span>
</div>

.box {
margin: 20px auto;
text-align: center;
}

.box span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background: black;
border-radius: 50px;
-webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;
}

.box span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}

.box span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}

@-webkit-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}

@-moz-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}
}


↑ Seitenanfang