I want to ask a way to create a repetitive wave on the bottom of the div using css, here's an example of his image
enter image description here
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
// background:#B7E8EB;
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(http://tedmcdo.com/labs/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
<div class="ocean">
<div class="wave"></div>
</div>
Related
I want to create animation like progressbar for that I have written following code
My code
.box {
width: 26px;
height: 10px;
display: inline-block;
background-size: 200% 100%;
background-image: linear-gradient(to left, red 50%, black 50%);
-webkit-animation: progressbar 1s ease infinite;
-moz-animation: progressbar 1s ease infinite;
-o-animation: progressbar 1s ease infinite;
animation: progressbar 1s ease infinite;
}
#-webkit-keyframes progressbar {
0% {
opacity: 1;
background-position: 0 0;
}
100% {
opacity: 1;
background-position: -100% 0;
}
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
My problem is all animation working at same time I want to add animation one bye one after one finishes in infinite loop like progress bar. Can animation-timing-function: linear, steps(3, end); will helps? Please help me in this. Thanks
you can set animation-delay but for that, you'll need to remove the !important
also if there's an N amount of boxes you can add the style using JS or SCSS loop.
.box {
width: 26px;
height: 10px;
display: inline-block;
background-size: 200% 100%;
background-image: linear-gradient(to left, red 50%, black 50%);
-webkit-animation: progressbar 1s ease infinite;
-moz-animation: progressbar 1s ease infinite;
-o-animation: progressbar 1s ease infinite;
animation: progressbar 1s ease infinite;
}
.box:nth-child(2) {
animation-delay: 1s;
}
.box:nth-child(3) {
animation-delay: 2s;
}
#-webkit-keyframes progressbar {
0% {
opacity: 1;
background-position: 0 0;
}
100% {
opacity: 1;
background-position: -100% 0;
}
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
if you wanted each one to stop before restarting you can do this:
.box {
width: 26px;
height: 10px;
display: inline-block;
background-size: 200% 100%;
background-image: linear-gradient(to left, red 50%, black 50%);
-webkit-animation: progressbar 3s ease infinite;
-moz-animation: progressbar 3s ease infinite;
-o-animation: progressbar 3s ease infinite;
animation: progressbar 3s ease infinite;
}
.box:nth-child(2) {
animation-name: progressbar1;
}
.box:nth-child(3) {
animation-name: progressbar2;
}
#-webkit-keyframes progressbar {
0% {
background-position: 0 0;
}
33%,
100% {
background-position: -100% 0;
}
}
#-webkit-keyframes progressbar1 {
0%,
33% {
background-position: 0 0;
}
66%,
100% {
background-position: -100% 0;
}
}
#-webkit-keyframes progressbar2 {
0%,
66% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
If you simply want the visual effect, here is an idea with one element and one animation
.box {
width: 100px;
height: 10px;
background:
linear-gradient(#fff,#fff) 32% 0,
linear-gradient(#fff,#fff) 68% 0,
linear-gradient(red, red),
black;
background-repeat:no-repeat;
background-size:5px 100%,5px 100%,0% 100%;
animation: progressbar 1s ease infinite;
}
#keyframes progressbar {
100% {
background-size:5px 100%,5px 100%,100% 100%;
}
}
<div class="box"></div>
If you want transparency we can add mask:
.box {
width: 100px;
height: 10px;
background:
linear-gradient(red, red) no-repeat,
black;
background-size:0% 100%;
-webkit-mask:
linear-gradient(#fff,#fff) left,
linear-gradient(#fff,#fff) center,
linear-gradient(#fff,#fff) right;
-webkit-mask-size:30% 100%;
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient(#fff,#fff) left,
linear-gradient(#fff,#fff) center,
linear-gradient(#fff,#fff) right;
mask-size:30% 100%;
mask-repeat:no-repeat;
animation: progressbar 1s ease infinite;
}
#keyframes progressbar {
100% {
background-size:100% 100%;
}
}
body {
background:pink;
}
<div class="box"></div>
I am trying to make something like this:
but the ball doesn't seem to pass through the ring, but rather passes across the ring. How can I fix this issue?
body {
height: 50em;
}
.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9
}
#keyframes spinner {
0% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
}
}
.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
}
.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}
<div class="ring"></div>
<div class="ball"></div>
I would create the ring using two elements (the bottom and the top part) to be able to adjust the z-index of each one differently:
.ring {
margin-top:80px;
position: relative;
width: 200px;
height: 100px;
}
.ring:before,
.ring:after{
content:"";
position:absolute;
left:0;
right:0;
height:100%;
border: 10px solid #ffcf82;
border-radius:50%;
box-sizing:border-box;
}
.ring:before {
z-index:-1;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.ring:after {
z-index:1;
clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
}
#keyframes spinner {
0%,50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-300px);
}
}
.ring:before,
.ring:after{
animation: spinner infinite alternate 4s;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 60px 80px;
position:relative;
z-index:0;
animation: translate 8s infinite linear;
}
<div class="ring"></div>
<div class="ball"></div>
Another idea in case you need better support than clip-path. The trick is to play with transparent color:
.ring {
margin-top:80px;
position: relative;
width: 200px;
height: 100px;
}
.ring:before,
.ring:after{
content:"";
position:absolute;
left:0;
right:0;
height:100%;
border: 10px solid #ffcf82;
border-radius:50%;
box-sizing:border-box;
}
.ring:before {
z-index:-1;
}
.ring:after {
z-index:1;
border-bottom-color:transparent;
border-right-color:transparent;
}
#keyframes spinner {
0%,50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
#keyframes translate {
0% {
transform: translateY(10px);
}
50% {
transform: translateY(-310px);
}
}
.ring:before,
.ring:after{
animation: spinner infinite alternate 4s;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 60px 80px;
position:relative;
z-index:0;
animation: translate 8s infinite linear;
}
<div class="ring"></div>
<div class="ball"></div>
You can try to change z-index of ball inside of animation
body {
height: 50em;
}
.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9
}
#keyframes spinner {
0% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
z-index: 10;
}
}
.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
position: relative;
}
.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}
<div class="ring"></div>
<div class="ball"></div>
You can use a 3d transform to get automatically this effect.
Rotate the circle in the X axis. Then, there is one part of it that is behind the plane, and another part that is in front of it. The ball is still in the 0 z plane, so it will naturally appear to cross through the circle:
body {
height: 50em;
transform-style: preserve-3d;
}
.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9;
margin-top: 100px;
transform: rotateX(50deg) rotateY(0deg) ;
transform-style: preserve-3d;
}
#keyframes spinner {
0%, 30% {
transform: rotateX(50deg) rotateY(0deg);
}
60%, 100% {
transform: rotateX(50deg) rotateY(180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
}
}
.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
}
.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}
<div class="ring"></div>
<div class="ball"></div>
The css animation is http://codepen.io/pksunkara/pen/gbejPv. It was inspired by http://codepen.io/fbrz/pen/ljuJn.
EDIT: How do you stop the first frame jump in that codepen?
HTML of my codepen is given below.
<div id="loader">
<div id="loaderout" class="box">
<div id="loaderin" class="box"></div>
<div class="ballbox box">
<div class="first-1 ball"></div>
<div class="second-1 ball"></div>
</div>
</div>
<div class="ballbox box">
<div class="first-2 ball"></div>
<div class="second-2 ball"></div>
</div>
</div>
CSS of my codepen is given below:
body {
background: #e9e9e9;
}
#loader {
position: absolute;
top: calc(50% - 40px);
left: calc(50% - 40px);
}
.box {
width: 80px;
height: 80px;
}
#loaderout + .ballbox {
animation: rotate-1 1.5s linear infinite;
}
#loaderin + .ballbox {
animation: rotate-2 1.5s ease-in-out infinite;
}
#loaderout {
animation: rotate-1 1.5s linear infinite;
clip: rect(0, 80px, 80px, 40px);
position: absolute;
}
#keyframes rotate-1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(220deg);
}
}
#keyframes rotate-2 {
0% {
transform: rotate(-140deg);
}
100% {
transform: rotate(140deg);
}
}
#loaderin {
animation: rotate-2 1.5s ease-in-out infinite,
animate 1.5s ease-in-out infinite;
clip: rect(0, 80px, 80px, 40px);
border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
}
#keyframes animate {
0% {
box-shadow: inset #e04e38 0 0 0 16px;
}
50% {
box-shadow: inset #e04e38 0 0 0 2px;
}
100% {
box-shadow: inset #e04e38 0 0 0 16px;
}
}
.ball {
position: absolute;
background: #e04e38;
border-radius: 50%;
}
.first-1 {
animation: borderball 1.5s ease-in-out infinite;
}
.second-1 {
animation: borderball 1.5s ease-in-out infinite;
bottom: 0;
}
.first-2 {
animation: borderball 1.5s ease-in-out infinite,
firstball 1.5s ease-in-out infinite;
}
.second-2 {
animation: borderball 1.5s ease-in-out infinite,
secondball 1.5s ease-in-out infinite;
bottom: 0;
visibility: hidden;
}
#keyframes firstball {
1%, 49% {
visibility: visible;
}
0%, 50%, 100% {
visibility: hidden;
}
}
#keyframes secondball {
0%, 50%, 100% {
visibility: hidden;
}
51%, 99% {
visibility: visible;
}
}
#keyframes borderball {
0%, 100% {
width: 16px;
height: 16px;
left: 32px;
}
50% {
width: 2px;
height: 2px;
left: 38px;
}
}
I fixed it by changing some specific CSS rules to the following.
.second-2 {
animation: borderball 1.5s ease-in-out infinite,
secondball 1.5s ease-in-out infinite;
bottom: 0;
opacity: 0;
}
#keyframes firstball {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0;
}
}
#keyframes secondball {
0%, 50% {
opacity: 0;
}
51%, 100% {
opacity: 1;
}
}
I'm trying to animate a tractor moving across the screen. I've got it working perfectly on my screen, however I want it to work across different platforms (only included -webkit-). When I re-size, the tractor is fluid, but the wheels aren't. How can I make them adjust together?
<body>
<div class="container">
<div class="tractor">
<img src="img/tractor-700px.png" alt="tractor">
</div>
<div class="wheels">
<div class="b_wheel">
<img src="img/b_wheel.png">
</div>
<div class="f_wheel">
<img src="img/f_wheel.png">
</div>
</div>
</div>
Here's my main CSS:
.tractor {
width: 380px;
position: absolute;
top: 40%;
left: -5%;
}
.tractor img {
width: 100%;
}
.tractor::after {
content: "";
display: block;
width: 120px;
height: 120px;
background: url('img/steam.png') no-repeat;
background-size: 120px;
position: absolute;
top: -37%;
left: 56%;
opacity: 0;
}
.f_wheel {;
width: 125px;
position: absolute;
top: 66.5%;
left: 13%;
}
.f_wheel img {
width: 100%;
}
.b_wheel {
width: 190px;
position: absolute;
top: 58.8%;
left: -7%;
}
.b_wheel img {
width: 100%;
}
And CSS for the animation:
.tractor {
-webkit-animation: tractor-bounce 3s ease-in-out infinite,
tractor-go 10s ease-in-out forwards;
}
.tractor::after {
-webkit-animation: steam 4s 2s infinite;
}
.f_wheel,
.b_wheel {
-webkit-animation: wheel-spin 10s ease-in-out forwards;
}
.f_wheel {
-webkit-animation: front-wheel-go 10s ease-in-out forwards,
wheel-spin 10s ease-in-out forwards;
}
.b_wheel {
-webkit-animation: back-wheel-go 10s ease-in-out forwards,
wheel-spin 10s ease-in-out forwards;
}
/* Keyframes - WebKit only
------------------------------------------ */
#-webkit-keyframes tractor-bounce {
50% { -webkit-transform: rotate(-5deg) translateY(-3px); }
}
#-webkit-keyframes tractor-go {
100% { left: 70%; }
}
#-webkit-keyframes steam {
40% { opacity: .8; }
60% { opacity: 1; }
100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}
#-webkit-keyframes wheel-spin {
0% { -webkit-transform: translateX(0px) rotate(50deg); }
100% { -webkit-transform: translateX(0px) rotate(480deg); }
}
#-webkit-keyframes front-wheel-go {
100% { left: 88%; }
}
#-webkit-keyframes back-wheel-go {
100% { left: 68.5%; }
}
JSFiddle to show it in action: http://jsfiddle.net/0j5L92vh/1/
[PS - This is my first post here so many thanks in advance! Let me know if I need to include anything else.]
I found a solution to your problem.
I utilized the .container div you have provided to keep everything positioned relative
to your tractor image. You can see the changes in the css code that made will make
it work in non webkit browsers. It will not work on versions of Internet Explorer before number 9.
The changes I have made are only to your css.
jsfiddle: http://jsfiddle.net/larryjoelane/h324j6u6/113/
css:
.container{
width: 380px;
position: relative;
/*bind the animation and set its properties*/
-webkit-animation: tractor 10s linear 0s; /* Chrome, Safari, Opera */
animation: tractor 10s linear 0s;
}
/*bind the wheel-spin animation*/
.f_wheel,
.b_wheel {
-webkit-animation: wheel-spin 10s ease-in-out forwards;
animation: wheel-spin 10s ease-in-out forwards;
}
/*bind the tractor bounce-animation*/
.tractor {
-webkit-animation: tractor-bounce 3s ease-in-out infinite,
tractor-go 10s ease-in-out forwards;
animation: tractor-bounce 3s ease-in-out infinite,
tractor-go 10s ease-in-out forwards;
}
.tractor img{
width:100%;
}
.b_wheel {
width: 190px;
position: relative;
top: -120px;
left: -7%;
}
.b_wheel img {
width: 100%;
}
.f_wheel{
width: 125px;
position:relative;
top: -258px;
left: 65%;
}
.f_wheel img {
width: 100%;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes tractor {
0% { left:0px; top:0px;}
25% {left:200px; top:0px;}
50% {left:400px; top:0px;}
75% {left:600px; top:0px;}
100% {left:800px; top:0px;}
}
/* Standard syntax */
#keyframes tractor {
0% { left:0px; top:0px;}
25% {left:200px; top:0px;}
50% {left:400px; top:0px;}
75% {left:600px; top:0px;}
100% {left:800px; top:0px;}
}
/*standard browser animation*/
#keyframes wheel-spin{
0% { transform: translateX(0px) rotate(50deg); }
100% { transform: translateX(0px) rotate(480deg); }
}
/*webkit browser animation*/
#-webkit-keyframes wheel-spin{
0% { -webkit-transform: translateX(0px) rotate(50deg); }
100% { -webkit-transform: translateX(0px) rotate(480deg); }
}
/*webkit tractor-bounce animation*/
#-webkit-keyframes tractor-bounce {
50% { -webkit-transform: rotate(-5deg) translateY(-3px); }
}
/*standard tractor-bounce web browser animation*/
#keyframes tractor-bounce {
50% { transform: rotate(-5deg) translateY(-3px); }
}
Here is the code, I really dont understand what is wrong.
I also tried using -webkit- but did not make any difference trying to move the objects accross the screen, simple animation
HTML:
<body>
<h1 class='cloud'>
SKILLS
</h1>
<h1 class='balloon'>
WORKS
</h1>
</body>
CSS:
.cloud {
background: url(../image/cloudskills.svg)no-repeat;
height:100px;
width:130px;
text-indent: -999em;
animation: cloud 5s linear infinite;
-webkit-animation: cloud 5s linear infinite;
}
#-webkit-keyframes cloud {
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
.balloon {
background: url(../image/balloonworks.svg)no-repeat;
width: 100px;
height: 130px;
text-indent: -999em;
animation: balloon 5s linear infinite;
}
#keyframes balloon{
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
Js Fiddle
for the elements to make some animation position should be given so aboslute or relative or you can use margin in keyframes to move the element
.cloud {
background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat;
height:100px;
width:130px;
background-size:100px auto;
text-indent: -999em;
animation: cloud 5s linear infinite;
-webkit-animation: cloud 5s linear infinite;
position:relative;
}
#-webkit-keyframes cloud {
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
.balloon {
background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat;
background-size:100px auto;
width: 100px;
height: 130px;
text-indent: -999em;
animation: cloud 5s linear infinite;
-webkit-animation: cloud 5s linear infinite;
position:relative;
}
#-webkit-keyframes balloon {
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
I changed only a bit of your code http://jsfiddle.net/2gbngtxp/
#-webkit-keyframes cloud {
0% {
left: 0;
}
50% {
margin-left: 100%; /*changed 'left:100%' to 'margin-left:100%'*/
}
100%{
left:0;
}