Css Goyang-goyang

 avatar
user_1215241
plain_text
a year ago
2.1 kB
53
Indexable
body {
    background-color: #F8CBAC;
}

.goyang-1 img {
	animation-name: goyang1;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.goyang-2 img {
	animation-name: goyang1;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.goyang-3 img {
	animation-name: goyang1;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.goyang-4 img {
	animation-name: goyang4;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.zoom-1 {
	transform: scale(1);
	animation: zoom 3s infinite;
}

.zoom-2 img {
	transform: scale(1);
	animation: zoom 2s infinite;
}

.naik-turun {
	animation-name: naikturun;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes goyang1{
    0%{ transform: rotate(0deg) scale(1); }
    50%{ transform: rotate(6deg) scale(1.18); }
    100%{ transform: rotate(0deg) scale(1); }
}

@keyframes goyang2{
    0%{ transform: rotate(0deg) scale(1); }
    25%{ transform: rotate(-4deg) scale(1.05); }
    50%{ transform: rotate(-8deg) scale(1.1); }
    75%{ transform: rotate(-4deg) scale(1.05); }
    100%{ transform: rotate(0deg) scale(1); }
}

@keyframes goyang3{
    0%{ transform: rotate(0deg) scale(1); }
    25%{ transform: rotate(-4deg) scale(1.1); }
    50%{ transform: rotate(0deg) scale(1); }
    75%{ transform: rotate(4deg) scale(1.1); }
    100%{ transform: rotate(0deg) scale(1); }
}

@keyframes goyang4{
    0%{ transform: rotate(0deg); }
    25%{ transform: rotate(-4deg); }
    75%{ transform: rotate(4deg); }
    100%{ transform: rotate(0deg); }
}

@keyframes zoom {
	0% { transform: scale(0.95); }
	60% { transform: scale(1); }
	100% { transform: scale(0.95); }
}

@keyframes naikturun {
	0% { transform: translate(0px,0px); }
	50% { transform: translate(0px,-10px); }
	100% { transform: translate(0px,0px); }
}


Editor is loading...
Leave a Comment