I have a text "Hello" and the other one is "World" which is written on HTML then I added an animation to these two texts on CSS. The first one object which is "Hello" is working but the it seems the other object "World" does not, I really don't know what is the problem behind this. By the way here's the full details:
HTML
<html>
<body>
<link rel="stylesheet" type="text/css" href="sample.css">
<div id="first" class="floating">Hello</div>
<div id="second" class="floating">World</div>
<p>hhtrhhthtrhhtrhtrhtrhtrhth<br>
gggregegg5tg5tgrg5trgrghtrhtrhtrhth<br>
frgfergregegtrghtrhththrth<br>
rgregergergjertgjoeruiguoerhjguhjeruih<br>
fuhefuiwhfuihweruifhuhfureheo<br>
jhfhufiuhufhurhfowfohweof<br>
hjfyuedfiedf<br>
fnheuihferifheruhfuergf</p>
</body>
</html>
CSS
#first.floating{
position: absolute;
font-size: 100%;
top: 52%;
bottom: 0;
left: 42.5%;
right: 0;
animation-name: floating;
-webkit-animation-name: floating;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes floating {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(8%);
}
100% {
transform: translateY(0%);
}
}
#-webkit-keyframes floating {
0% {
-webkit-transform: translateY(0%);
}
50% {
-webkit-transform: translateY(8%);
}
100% {
-webkit-transform: translateY(0%);
}
}
#second.floating{
position: absolute;
font-size: 100%;
top: 230%;
bottom: 0;
left: 42.5%;
right: 0;
animation-name: floating;
-webkit-animation-name: floating;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes floating {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(8%);
}
100% {
transform: translateY(0%);
}
}
#-webkit-keyframes floating {
0% {
-webkit-transform: translateY(0%);
}
50% {
-webkit-transform: translateY(8%);
}
100% {
-webkit-transform: translateY(0%);
}
}
p {
position: absolute;
font-size: 100%;
top: 290%;
bottom: 0;
left: 42.5%;
right: 0;
}
}
Removing the bottom: 0; from #second.floating seems to make the animation work with a top value of 230%. It's a really small movement.
#second.floating{
position: absolute;
font-size: 100%;
top: 230%;
left: 42.5%;
right: 0;
animation-name: floating;
-webkit-animation-name: floating;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
JSFiddle
Updated with feedback from comments
You animation is working. The animation is trying to animate the position 8% between its top position and its bottom position. The second floating div has a top position of 230%, so effectively the same as the bottom position, so it has nothing to animate. If you change the top position to less than 100%, then you should see some movement
Related
.title2 {
position: absolute;
top: 0;
right: 31%;
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-delay: 2.5s;
animation-timing-function: ease-out;
animation-duration: 1s;
}
#keyframes fadeOutOpacity {
0% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
display: none;
}
}
Could someone explain to me how I can make it disappear? I thought so it worked but it doesn't work! I wanted to make a text disappear, the effect works but then the text comes back visible when instead I would like to hide it permanently at the end of the animation.
You can use the CSS property animation-fill-mode, and change your Keyframe Animation like so:
.title2 {
position: absolute;
top: 0;
right: 31%;
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-delay: 2.5s;
animation-timing-function: ease-out;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes fadeOutOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
If you even toggle the display property from none to block, your transition on other elements will not occur. It's work only with displayed elements. If u want to hide element u can use opacity, height
.title2 {
width: 100px;
height: 50px;
background: red;
position: absolute;
top: 0;
right: 31%;
animation: 1s fadeOutOpacity ease-out;
opacity: 0
}
#keyframes fadeOutOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="title2"/>
Project Description: I am in quest to apply two animations to a nested images inside a div that actually The Div has the responsibility to move the image up and down because the image is captivated inside it And the image(img) which is nested inside the div, Has the responsibility to rotate successively while the div is bouncing the image up and down.
What I want:
1.the image inside the div should keep rotating 360 degrees
2.While the 1 is happening, The div should keep bouncing or moving up and down
.ground {
position: absolute;
width: 100%;
height: 20px;
background-color: gray;
top: 800px;
}
.ball-container {
position: relative;
width 100px;
height: 100px;
left: 50%;
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-direction: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes bounce{
0% {
top: 0px;
}
50% {
top: 700px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
img {
position: absolute;
width: 100px;
height: 100px;
animation-name: rotation;
animation-direction: forwards;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
#keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<html>
<div class="ball-container" id="ball-container"><img src="https://image.flaticon.com/icons/svg/53/53283.svg" alt="ball" class="ball" id="ball"/>
</div>
<div class="ground"></div>
</html>
The problem: the bouncing process is awesome, but I dont know how to make the image rotating while it is bouncing.
Thanks.
Codepen Link
THE POST IS EDITED AND HAS NO PROBLEM AFTER APPLYING THE ANSWER
animation-iteration-count should be infinite on img rotation, to match the number of times it bounces as well, else the animation will run once and stop while the box is still bouncing. Also you have a typo, the semicolon in to {transform: rotate(360deg;)} should be outside to {transform: rotate(360deg);}. This is why it doesnt work.
Furthermore animation-direction:forwards is invalid, the correct value is animation-direction:normal.
With these corrections the code is:
.ground {
position: absolute;
width: 100%;
height: 20px;
background-color: gray;
top: 800px;
}
.ball-container {
position: relative;
width 100px;
height: 100px;
left: 50%;
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-direction: normal;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes bounce{
0% {
top: 0px;
}
50% {
top: 700px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
img {
position: absolute;
width: 100px;
height: 100px;
animation-name: rotation;
animation-direction: normal;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
#keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<html>
<div class="ball-container" id="ball-container"><img src="https://image.flaticon.com/icons/svg/53/53283.svg" alt="ball" class="ball" id="ball"/>
</div>
<div class="ground"></div>
</html>
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>
I have two images and I've found css ::after keeps one image on top of the other quite nicely, even when the screen size changes. The thing is I want the image underneath to spin and the image on top to remain stationary. I can't seem to do this and I'm not even sure this is possible using ::after. Is there a way to do it?
Here's my code:
.box {
display: inline-block;
position: fixed;
top: 50%;
left: 30%;
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spinnerRotate;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spinnerRotate;
-ms-animation-duration: 5s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
.box:after {
content: '';
position: absolute;
width: 50px;
height: 50px;
top: 25px;
right: 0;
bottom: 0;
left: 25px;
background: url("../Content/images/top.png");
}
<div class="box">
<img src="../Content/images/bottom.png">
</div>
Here's the animation:
#-webkit-keyframes spinnerRotate
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(720deg);}
}
#-moz-keyframes spinnerRotate
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(720deg);}
}
#-ms-keyframes spinnerRotate
{
from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(720deg);}
}
Well, you can do it like this:
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.box::after {
animation: rotate 5s infinite;
content:url("http://lorempixel.com/sports/400/200/");
}
<div class="box">
<img src="http://lorempixel.com/g/400/200/">
</div>
I changed your background-image with using the content property. This is not necessary but more comfortable, as you don't need to give the image dimensions.
Here is a nice article about css animations: https://css-tricks.com/almanac/properties/a/animation/
Here is information about compatibility: http://caniuse.com/#search=animation
I am trying to add this scroll animation script to my website: http://codepen.io/zutrinken/pen/yhqEA
#scrolldown {
bottom: 40px;
height: 100px;
margin-left: -50px;
position: absolute;
left: 50%;
text-align: center;
width: 100px;
z-index: 100;
}
#scrolldown p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
color: #000;
}
#scrolldown > p {
text-transform: uppercase;
text-indent: 3px;
}
.mouse {
border: 2px solid #000;
border-radius: 13px;
display: block;
height: 46px;
left: 50%;
margin: 10px 0 0 -13px;
position: absolute;
width: 26px;
}
.mouse span {
display: block;
font-size: 1.5em;
margin: 6px auto;
}
#keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
<div id="scrolldown">
<p>scroll</p>
<div class="mouse">
<span><p>↓</p></span>
</div>
</div>
The animation works in Chrome while in Code Pen but i can not get it to work outside of Code Pen. How Can I get this script to work with other browsers?
http://rapidevac.biz/tapreport/ This is my website that i added the script to. Like i said, it works with IE 9 but not with other browsers.
Thanks guys for reviewing my question!
Add this after your #keyframes scroll to se the animation in all browsers
#-moz-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
#-o-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
#keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
Your transitions are not cross-browser friendly.
Change your #scrolldown p css to this:
#scrolldown p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: scroll;
-moz-animation-duration: 2s;
-moz-animation-fill-mode: both;
-moz-animation-iteration-count: infinite;
-moz-animation-name: scroll;
-o-animation-name: scroll;
-o-animation-duration: 2s;
-o-animation-fill-mode: both;
-o-animation-iteration-count: infinite;
}