I'm trying to make waves with continuously floating animation. I have put the code below that I have tried and it's working fine in all browsers except internet explorer.
Is there anything to do with this code to make it work in explorer? Please help.
If you need anything else please let me know. Thanks.
.inf-waveWrapperInner {
position: absolute;
top: auto;
right: 0;
bottom: 25px;
left: 0;
overflow: visible;
margin: auto;
}
.inf-bgTop {
height: 188px;
bottom: 130px;
overflow: visible;
}
.inf-bgMiddle {
height: 255px;
bottom: 5px;
overflow: visible;
}
.inf-bgBottom {
height: 170px;
}
.inf-wave {
width: 500%;
height: 100%;
background-repeat: repeat no-repeat !important;
background-position: 0 top;
transform-origin: center top;
}
.inf-wave.inf-waveTop {
animation: move_wave 25s linear infinite;
-webkit-animation: move_wave 25s linear infinite;
animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
.inf-wave.inf-waveMiddle {
animation: move_wave 25s linear infinite;
-webkit-animation: move_wave 25s linear infinite;
animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
.inf-wave.inf-waveBottom {
animation: move_wave 25s linear infinite;
-webkit-animation: move_wave 25s linear infinite;
animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
&::after {
content: '';
display: block;
background: #0B5268;
width: 100%;
height: 700px;
position: absolute;
top: 100px;
left: 0;
right: 0;
}
}
#-webkit-keyframes move_wave {
0% {
transform: translateX(0) translateZ(0);
-webkit-transform: translateX(0) translateZ(0);
}
50% {
transform: translateX(-25%) translateZ(0);
-webkit-transform: translateX(-25%) translateZ(0)
}
100% {
transform: translateX(0) translateZ(0);
-webkit-transform: translateX(0) translateZ(0)
}
}
#keyframes move_wave {
0% {
transform: translateX(0) translateZ(0);
-webkit-transform: translateX(0) translateZ(0);
}
50% {
transform: translateX(-25%) translateZ(0);
-webkit-transform: translateX(-25%) translateZ(0)
}
100% {
transform: translateX(0) translateZ(0);
-webkit-transform: translateX(0) translateZ(0)
}
}
<div class="inf-waveWrapperInner inf-bgTop">
<div class="inf-wave inf-waveTop" style="background:url(images/inf-wave-one.svg);"></div>
</div>
<div class="inf-waveWrapperInner inf-bgMiddle">
<div class="inf-wave inf-waveMiddle" style="background:url(images/inf-wave-two.svg);"></div>
</div>
<div class="inf-waveWrapperInner inf-bgBottom">
<div class="inf-wave inf-waveBottom" style="background:url(images/inf-wave-three.svg);"></div>
</div>
Related
I am trying to get rid of white space after I animate and translateY. Maybe setting the body height to auto? Does translateY leave a margin at the bottom or is that just the body white space, I can't click on it in inspect. Here is my code in a codepen. The white space is after my last div, I have attached my code and keyframes.
body{
padding: 0;
margin: 0;
overflow-x: hidden;
}
.banner{
position: relative;
transform: scale(1.5);
background: url(../image/splashing.jpg) center no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
animation: slides 1s;
animation-delay:2s;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(0,0,0,1);
animation-fill-mode:forwards;
-webkit-animation:slides 1s;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: cubic-bezier(0,0,0,1);
-webkit-animation-fill-mode: forwards;
}
.header h1{
display: block;
position: absolute;
bottom: 15vh;
left: 0;
}
.header{
position: relative;
color: white;
opacity: 0;
animation: Fade 1s;
animation-delay: 3s;
animation-timing-function: cubic-bezier(0,0,1,1);
animation-fill-mode: forwards;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-webkit-animation: Fade 1s;
-webkit-animation-timing-function: cubic-bezier(0,0,1,1);
-webkit-animation-delay:3s;
-webkit-animation-fill-mode: forwards;
z-index: 999;
}
.orange{
background-color: orange;
animation: up .5s;
animation-delay: 2s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
-webkit-animation: up .5s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes slides{
0%{
-webkit-transform: scale(2,2);
}
100%{
-webkit-transform: scale(1,1);
}
}
#-webkit-keyframes Fade{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
#-webkit-keyframes up{
from{
-webkit-transform: translateY(0);
}
to{
-webkit-transform: translateY(-30%);
}
}
using position:absolute; in class orange will do the trick
I have this script letting 2 characters move around 360degrees each. Now i have to add a pause of 4 seconds each time both have turned 180degrees. I have tried it with percentages but that doesnt work well. Either the letters will spin too fast or way too slow or the pause is not long enough.
Anyone has a solution for my problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<style>
.letter{
height: 80px;
z-index: 99;
position: absolute;
margin-top: 100px
}
.letter1{
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.letter2{
margin-left: 700px;
}
.letter3{
margin-left: 780px;
}
.letter4{
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.letter5{
margin-left: 940px;
}
.letter6{
margin-left: 1020px;
}
.C {
position: absolute;
margin-left: 730px;
animation: rotC 3s infinite linear;
z-index: 1;
display: inline-block;
}
.P {
position: absolute;
margin-left: 730px;
animation: rotP 3s infinite linear;
z-index: 1;
display: inline-block;
/*animation-delay: move 3s infinite;*/
}
#keyframes rotC {
from {
transform: rotate(0deg)
translate(-130px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-130px)
rotate(-360deg);
}
}
#keyframes rotP {
from {
transform: rotate(0deg)
translate(130px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(130px)
rotate(-360deg);
}
}
</style>
<div class="vid"><!-- prycto-->
<img src="geknletters/P.png" alt="p" class="P letter">
<img src="geknletters/R.png" alt="r" class="letter2 letter">
<img src="geknletters/y.png" alt="y" class="letter3 letter">
<img src="geknletters/C.png" alt="c" class="C letter">
<img src="geknletters/T.png" alt="t" class="letter5 letter">
<img src="geknletters/o.png" alt="o" class="letter6 letter">
<video src="051476630-astronaut-doing-ballet-dance-m_H264HD1080.mov" style="position: absolute;
margin: 0;
width: 100%;
height: 100vh;
top:0;
left: 0;" >
</video>
</div>
</body>
</html>
Kind regards,
Jorn Barkhof
You can't stop the animation when the animation started .
There is animation-delay but that delays the start of the animation, but after it's started it runs continuously.
The solution will be Keyframes with No Changes.
For more info please read this link.
https://css-tricks.com/css-keyframe-animation-delay-iterations/
And the Answer to your question.
First thing that you will do is to make the animation to be 14s
since you will need a 4s stop and 3s animate .
3s animate (180deg) + 4s stop (180deg) + 3s animate (360deg) + 4s stop (360deg) = 14s
animation: rotP 14s infinite linear;
animation: rotC 14s infinite linear;
After that you will need to calculate the percentage of the animation.
We will need to use to percentage since we will do the keyframes with no changes.
(3/14)*100 = 21.4% (For 3s) -- (4/14)*100 = 28.6% (For 4s)
(21.4% = 3s) animation and (28.6% = 4s) stop time. For the 14s period of time.
then initialize the percentage
0% + 21.4% = 21.4% [total time 3s] -- since (21.4% = 3s) animation
21.4% + 28.6% = 50% [total time 7s] -- since (28.6% = 4s) stop time
50% + 21.4% = 71.4% [total time 10s]
71.4% + 28.6% = 100% [total time 14s]
.letter{
height: 80px;
z-index: 99;
position: absolute;
margin-top: 100px
}
.letter1{
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.letter2{
margin-left: 700px;
}
.letter3{
margin-left: 780px;
}
.letter4{
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.letter5{
margin-left: 940px;
}
.letter6{
margin-left: 1020px;
}
.C {
position: absolute;
margin-left: 730px;
animation: rotC 14s infinite linear;
z-index: 1;
display: inline-block;
}
.P {
position: absolute;
margin-left: 730px;
animation: rotP 14s infinite linear;
z-index: 1;
display: inline-block;
/*animation-delay: move 3s infinite;*/
}
#keyframes rotC {
0% {
transform: rotate(0deg)
translate(-130px)
rotate(0deg);
}
21.4% {
transform: rotate(180deg)
translate(-130px)
rotate(-180deg);
}
50% {
transform: rotate(180deg)
translate(-130px)
rotate(-180deg);
}
71.4% {
transform: rotate(360deg)
translate(-130px)
rotate(-360deg);
}
100% {
transform: rotate(360deg)
translate(-130px)
rotate(-360deg);
}
}
#keyframes rotP {
0% {
transform: rotate(0deg)
translate(130px)
rotate(0deg);
}
21.4% {
transform: rotate(180deg)
translate(130px)
rotate(-180deg);
}
50% {
transform: rotate(180deg)
translate(130px)
rotate(-180deg);
}
71.4% {
transform: rotate(360deg)
translate(130px)
rotate(-360deg);
}
100% {
transform: rotate(360deg)
translate(130px)
rotate(-360deg);
}
}
<div class="vid"><!-- prycto-->
<img src="geknletters/P.png" alt="p" class="P letter">
<img src="geknletters/R.png" alt="r" class="letter2 letter">
<img src="geknletters/y.png" alt="y" class="letter3 letter">
<img src="geknletters/C.png" alt="c" class="C letter">
<img src="geknletters/T.png" alt="t" class="letter5 letter">
<img src="geknletters/o.png" alt="o" class="letter6 letter">
<video src="051476630-astronaut-doing-ballet-dance-m_H264HD1080.mov" style="position: absolute;
margin: 0;
width: 100%;
height: 100vh;
top:0;
left: 0;" >
</video>
</div>
Hope this helps
I am trying to animate a div to spin 360deg and move 400px to the right. How can I do this using CSS3? Do I need to use CSS3 keyframes?
<div id="spin"></div>
CSS:
#spin {
width:200px;
height:200px;
background-color:blue;
}
Yes, you need keyframes:
#spin {
width: 200px;
height: 200px;
background-color: blue;
-webkit-animation: myanimation 5s;
animation: myanimation 5s;
}
#-webkit-keyframes myanimation {
100% { margin-left: 400px; -webkit-transform: rotate(360deg); }
}
#keyframes myanimation {
100% { margin-left: 400px; transform: rotate(360deg); }
}
<div id="spin"></div>
add all the prefixes so it works on all modern browsers
-webkit-
-moz-
-ms-
-o-
Try this and adjust to your needs:
#spin {
position: absolute;
width: 200px;
height: 200px;
background: #00f;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
left: 0px;
}
to {
transform: rotate(360deg);
left: 400px;
}
}
<div id="spin"></div>
I have been looking to create a similar effect to https://www.google.com/events/io/logistics (the inspiration) however the 4 elements are not rendering correctly, one element jumps over the next. I have tried several iterations of this with no avail. You can see in this Fiddle one side jumps over the next. I have changed the perspective to see this more clearly.
http://jsfiddle.net/368Rc/ (UPDATED:7/11)
<div style="height: 300px;margin-top:40px;">
<div class="cube-wrap">
<div class="cube depth">
<div class="back-pane">back</div>
<div class="left-pane">left</div>
<div class="right-pane">right</div>
</div>
</div>
</div>
and CSS
/*************** ANIMATIONS ***************/
#-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(360deg); }
}
#-ms-keyframes spin {
from { ms-transform: rotateY(0); }
to { ms-transform: rotateY(360deg); }
}
#keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
#-webkit-keyframes spin-vertical {
from { -webkit-transform: rotateX(0); }
to { -webkit-transform: rotateX(-360deg); }
}
#-ms-keyframes spin-vertical {
from { ms-transform: rotateX(0); }
to { ms-transform: rotateX(-360deg); }
}
#keyframes spin-vertical {
from { transform: rotateX(0); }
to { transform: rotateX(-360deg); }
}
/*************** STANDARD CUBE ***************/
.cube-wrap {
-webkit-perspective: 1800px;
-webkit-perspective-origin: 0% 1000px;
-moz-perspective: 1800px;
-moz-perspective-origin: 0% 1000px;
-ms-perspective: 1800px;
-ms-perspective-origin: 0% 1000px;
perspective: 1800px;
perspective-origin: 0% 1000px;
}
.cube {
position: relative;
width: 152px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 20s infinite linear;
-moz-transform-style: preserve-3d;
-moz-animation: spin 20s infinite linear;
-ms-transform-style: preserve-3d;
-ms-animation: spin 20s infinite linear;
transform-style: preserve-3d;
animation: spin 20s infinite linear;
}
.cube div {
position: absolute;
width: 152px;
height: 202px;
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
font-size: 20px;
text-align: center;
line-height: 200px;
color: rgba(0,0,0,0.5);
font-family: sans-serif;
text-transform: uppercase;
}
/*************** DEPTH CUBE ***************/
.depth div.back-pane {
background: url("http://doggydish.com/PROJECTS/balloon-green-l.svg");
-webkit-transform: translateZ(10px) rotateY(90deg);
-webkit-transform-origin: 50% 50% 0;
-moz-transform: translateZ(10px) rotateY(90deg);
-moz-transform-origin: 50% 50% 0;
-ms-transform: translateZ(10px) rotateY(90deg);
-ms-transform-origin: 50% 50% 0;
transform: translateZ(10px) rotateY(90deg);
transform-origin: 50% 50% 0;
left:10px;
}
.depth div.right-pane {
-webkit-transform:rotateY(0deg) translateX(0px);
-webkit-transform-origin: 50% 200% 0;
-moz-transform:rotateY(0deg) translateX(0px);
-moz-transform-origin: 50% 200% 0;
-ms-transform:rotateY(0deg) translateX(0px);
-ms-transform-origin: 50% 200% 0;
transform:rotateY(0deg) translateX(0px);
transform-origin: 50% 200% 0;
background: url("http://doggydish.com/PROJECTS/balloon-blue-r.svg");
}
.depth div.left-pane {
-webkit-transform:rotateY(0deg) translateX(0px);
-webkit-transform-origin: 50% 0% 0;
-moz-transform:rotateY(0deg) translateX(0px);
-moz-transform-origin: 50% 0% 0;
-ms-transform:rotateY(0deg) translateX(0px);
-ms-transform-origin: 50% 0% 0;
transform:rotateY(0deg) translateX(0px);
transform-origin: 50% 0% 0;
background: url("http://doggydish.com/PROJECTS/balloon-blue-l.svg");
}
.depth div.front-pane {
background: url("http://doggydish.com/PROJECTS/balloon-green-r.svg");
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
transform: translateZ(100px);
}
Note: I'm testing on Firefox/Chrome, there may be issues on SAFARI.
Currently chrome doesn't support standard properties of transform.
so you need to use prefix to support all your browsers, even in key-frames.
i have updated one of your key-frames, to show how it works, so fix other keyframes as you want.
DEMO FIDDLE
.balloon-cage2 {
display:block;
position:relative;
left:400px;
}
.balloon-green-r {
background: url("http://doggydish.com/PROJECTS/balloon-green-r.svg");
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: right;
-webkit-animation: rotateyr 6s linear infinite;
-moz-animation: rotateyr 6s linear infinite;
animation: rotateyr 6s linear infinite;
margin: 0 auto;
position: absolute;
background-color:#1abc9c;
}
.balloon-green-l {
background: url(http://doggydish.com/PROJECTS/balloon-green-l.svg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: left;
-webkit-animation: rotateyl 6s linear infinite;
-moz-animation: rotateyl 6s linear infinite;
animation: rotateyl 6s linear infinite;
margin: 0 auto;
position: absolute;
}
.balloon-blue-l {
background: url(http://doggydish.com/PROJECTS/balloon-blue-l.svg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: left;
-webkit-animation: rotateyl2 6s linear infinite;
-moz-animation: rotateyl2 6s linear infinite;
animation: rotateyl2 6s linear infinite;
margin: 0 auto;
position: absolute;
}
.balloon-blue-r {
background: url(http://doggydish.com/PROJECTS/balloon-blue-r.svg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: right;
-webkit-animation: rotateyr2 6s linear infinite;
-moz-animation: rotateyr2 6s linear infinite;
animation: rotateyr2 6s linear infinite;
margin: 0 auto;
position: absolute;
}
#-webkit-keyframes rotateyr {
0% {
-webkit-transform: rotateY(0deg);
-webkit-transform-origin: 50% 0% 0;
}
100% {
-webkit-transform: rotateY(360deg);
-webkit-transform-origin: 50% 0% 0;
}
}
#keyframes rotateyr {
0% {
transform: rotateY(0deg);
transform-origin: 50% 0% 0;
}
100% {
transform: rotateY(360deg);
transform-origin: 50% 0% 0;
}
}
#keyframes rotateyr2 {
0% {
transform: rotateY(90deg);
transform-origin: 50% 0 0;
}
100% {
transform: rotateY(450deg);
transform-origin: 50% 0% 0;
}
}
#keyframes rotateyl {
0% {
transform: rotateY(0deg);
transform-origin: 50% 0 0;
}
100% {
transform: rotateY(360deg);
transform-origin: 50% 0 0;
}
}
#keyframes rotateyl2 {
0% {
transform: rotateY(90deg);
transform-origin: 50% 0 0;
}
100% {
transform: rotateY(450deg);
transform-origin: 50% 0 0;
}
}
I am working on some basic cog animation using css3,
The problem I have is the cogs are moving around slightly and not staying in one exact spot.
Is it possible to fix the images in one spot so they dont move.
Amy help would be great !!!
Please see Fiddle
.container{
background:black;
}
#cog-animation{
height: 200px;
margin: 0 auto;
max-width: 380px;
position: relative;
margin-top: 30px;
}
/* CSS3 keyframes */
#-webkit-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
#-webkit-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
#-moz-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
/* gears */
.gear {
float: none;
position: absolute;
text-align: center;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#gear1 {
background: url('http://paulobriendesign.co.uk/images/g1.png') no-repeat 0 0;
height: 58px;
width: 58px;
left: 81px;
top: 25px;
-moz-animation-name: ckw;
-moz-animation-duration: 10s;
-webkit-animation-name: ckw;
-webkit-animation-duration: 10s;
}
#gear2 {
background: url('http://paulobriendesign.co.uk/images/g2.png') no-repeat 0 0;
height: 85px;
left: 143px;
top: 36px;
width: 85px;
-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;
-webkit-animation-name: cckw;
-webkit-animation-duration: 16.84s;
}
#gear3 {
background: url('http://paulobriendesign.co.uk/images/g3.png') no-repeat 0 0;
height: 45px;
width: 45px;
left: 218px;
top: 11px;
-moz-animation-name: ckw;
-moz-animation-duration: 13.5s;
-webkit-animation-name: ckw;
-webkit-animation-duration: 13.5s;
}
The background images are off center.
Try adding:
background-position:center;
The images aren't perfectly square - g1 is 54x53; g2 is 80x79; g3 is 39x38.
The bigger issue is your divs are bigger than your background images. #gear1 is 58x58, but the image is only 54x53, so there is some extra space which makes it look like the gear is moving when the div rotates.