hello i want to make my background move but the animation is not active. Why ?
#keyframes anima {
0% {
background-position-y: 0px;
} 100% {
background-position-y: -150px;
}
}
#bando {
border-radius: 4px;
background-image: url(neon.jpg);
background-size: 130%;
width: 600px;
padding-top:40px;
padding-bottom:40px;
margin-bottom: 10px;
font-size: 30px;
height:150px;
animation-name: anima;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate-reverse;
}
Thanks in advance to help me because I am blocked on it since 4 hours
try this in https://jsfiddle.net/526vttyg/
You're missing an animation-duration, and you have to specify that, otherwise the animation won't do anything. The default animation-duration is 0
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
#bando {
border-radius: 4px;
background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);
background-size: 130%;
width: 600px;
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 10px;
font-size: 30px;
height: 150px;
animation-name: anima;
animation-duration: 2s;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate-reverse;
}
#keyframes anima {
0% {
background-position-y: 0;
}
100% {
background-position-y: -150px;
}
}
<div id="bando"></div>
Related
I have a bit of animation which works perfectly in chrome but doesn't on safari. Weird isn't it? Ok here's my code:
<header>
<div class="ripple-1"></div>
<div class="ripple-2"></div>
<div class="ripple-3"></div>
<div class="ripple-4"></div>
<div class="ripple-5"></div>
</header>
Ok this doesn't work in Safari and mobile as I said, there's no movement whatsoever.
Also, still and only in Safari and mobile, on safari its become border squere
What am I doing wrong?
here is my css
header{
min-height: 100vh;
background-color: #42A5F5;
position: relative;
overflow: hidden;
}
.ripple-1,
.ripple-2,
.ripple-3,
.ripple-4,
.ripple-5{
height: 1px;
width: 1px;
position: absolute;
left: 50%;
bottom: 50%;
background: dodgerblue;
border-radius: 50%;
transform: translate3d(-50%, 50%, 0);
animation-name: ripple;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
will-change: transform, opacity;
}
.ripple-1{
animation-delay: 0;
}
.ripple-2{
animation-delay: 1s;
}
.ripple-3{
animation-delay: 2s;
}
.ripple-4{
animation-delay: 3s;
}
.ripple-4{
animation-delay: 4s;
}
.ripple-5{
animation-delay: 5s;
}
main{
height: 4000px;
background-color: #f7f7f7;
}
#keyframes ripple{
0%{
transform: translate3d(-50%, 50%, 0) scale(0);
opacity: .33;
}
100%{
transform: translate3d(-50%, 50%, 0) scale(2000);
opacity: 0;
}
}
I tried -webkit-, but didnt work :(
use the below css it will work fine on safari as well.
header{
min-height: 100vh;
background-color: #42A5F5;
position: relative;
overflow: hidden;
}
.ripple-1,
.ripple-2,
.ripple-3,
.ripple-4,
.ripple-5{
height: 1px;
width: 1px;
position: absolute;
left: 50%;
top: 50%;
background: dodgerblue;
border-radius: 50%;
transform: translate(-50%, -50%);
animation-name: ripple;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
will-change: transform, opacity, width;
r
}
.ripple-1{
animation-delay: 0;
}
.ripple-2{
animation-delay: 1s;
}
.ripple-3{
animation-delay: 2s;
}
.ripple-4{
animation-delay: 3s;
}
.ripple-4{
animation-delay: 4s;
}
.ripple-5{
animation-delay: 5s;
}
main{
height: 4000px;
background-color: #f7f7f7;
}
#keyframes ripple{
0%{
opacity: .33;
}
100%{
opacity: 0;
height: 2000px;
width: 2000px;
}
}
I have following CSS for animating two separate elements:
.loading-icon,
.loading-icon-2{
height: 50px;
position: relative;
left: 50%;
top: 30%;
transform: translateXY(-50%, 50%);
}
.loading-icon {
display: flex;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
animation-name: spin;
animation-duration: 2s;
transition-timing-function: linear;
animation-iteration-count: infinite;
animation: spin 2s linear infinite;
}
.loading-icon-2 {
display: flex;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
animation-name: anotherspin;
animation-duration: 2s;
transition-timing-function: linear;
animation-iteration-count: infinite;
}
.loading-icon div,
.loading-icon-2 div {
margin: auto;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes anotherspin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
The only difference is that for the loading-icon-2 class all the animation properties have been specified separately instead of using the shorthand style.
But both the elements are behaving differently. Could someone please help understand why this is happening or am I missing something here.
See the code working here at CodePen.
The difference is that you're using transition-timing-function: linear instead of animation-timing-function: linear. When you use the shorthand, though, it implicitly employs the correct property name, making the animation look continuous with no easing.
I am making a simple animation in Codepen - the poem fades in, then the word (that is also the button) fades in. The user clicks on the word and it changes to the next part of the poem.
My problem is that the poem and single word with flash before the fade out starts.
I have tried ALL the tricks I can find, adding:
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
and none of them have worked.
Link to the codepen: https://codepen.io/zaenaria/pen/xWVLmP
$(".btnQuestion").hide();
var answer = document.getElementById('answerBtn');
answer.style.cursor = 'pointer';
answer.onclick = function() {
$(".poem").addClass("animationComplete");
$(".btnAnswer").addClass("animationComplete");
$(".answer").addClass("animationFade");
$(".btnQuestion").show();
$(".btnQuestion").addClass("animationFade");
};
var question = document.getElementById('questionBtn');
question.style.cursor = "pointer";
question.onclick = function() {
$(".answer").addClass("animationComplete");
$(".btnQuestion").addClass("animationComplete");
$(".question").addClass("animationFade");
$(".rip").addClass("animationRIP");
};
body {
background: url("http://res.cloudinary.com/zaenaria/image/upload/v1521062114/paper_texture.jpg");
background-repeat: no-repeat;
background-position: cover;
color: white;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
}
.poem {
font-size: 30px;
font-family: 'Open Sans Condensed', sans-serif;
height: 300px;
width: 900px;
position: absolute;
margin: -150px 0 0 -450px;
opacity: 0;
animation-name: fade;
animation-delay: 0.5s;
animation-duration: 1.5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.answer {
font-size: 30px;
font-family: 'Open Sans Condensed', sans-serif;
height: 160px;
width: 900px;
position: absolute;
margin: -80px 0 0 -450px;
opacity: 0;
}
.question {
font-size: 50px;
font-family: 'Open Sans Condensed', sans-serif;
height: 80px;
width: 400px;
position: absolute;
margin: -40px 0 0 -200px;
opacity: 0;
}
.rip {
font-size: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-align: center;
height: 140px;
width: 400px;
position: absolute;
margin: 25px 0 0 -200px;
opacity: 0;
}
.btnAnswer{
font-size: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-align: center;
height: 80px;
width: 180px;
position: absoulte;
margin: 200px 0 0 -100px;
opacity: 0;
animation-name: fade;
animation-delay: 2.0s;
animation-duration: 1.5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.btnAnswer:hover {
background: #f7f7f7;
color: black;
}
.btnQuestion:hover {
background: #f7f7f7;
color: black;
}
.btnQuestion {
font-size: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-align: center;
height: 80px;
width: 180px;
position: absoulte;
margin: -150px 0 0 -90px;
opacity: 0;
}
#keyframes fade {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes complete {
0% {opacity: 1;}
100% {opacity: 0;}
}
.animationFade {
animation-name: fade;
animation-delay: 2.0s;
animation-duration: 1.5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.animationComplete {
animation-name: complete;
animation-delay: 0.3s;
animation-duration: 1.0s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.animationRIP {
animation-name: fade;
animation-delay: 4.0s;
animation-duration: 1.0s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<div class="poem">Oh me! Oh life! of the questions of these recurring, </br>
Of the endless trains of the faithless, of cities fill’d with the foolish, </br>
Of myself forever reproaching myself, (for who more foolish than I, and who more faithless?) </br>
Of eyes that vainly crave the light, of the objects mean, of the struggle ever renew’d, </br>
Of the poor results of all, of the plodding and sordid crowds I see around me, </br>
Of the empty and useless years of the rest, with the rest me intertwined, </br>
The question, O me! so sad, recurring—What good amid these, O me, O life?</div>
<div class="answer">
That you are here—that life exists and identity, </br>
That the powerful play goes on, and you may contribute a verse.</br>
~Walt Whitman
</div>
<div class="question">What will your verse be?
</div>
<div class="rip">R.I.P Robin Williams</br>
1951-2014</div>
<div class="btnAnswer" id="answerBtn">Answer.</div>
<div class="btnQuestion" id="questionBtn">Question.</div>
</div>
</body>
Try changing the animation start delay to 0 in the css:
.animationComplete {
animation-name: complete;
animation-delay: 0s;
animation-duration: 1.0s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
I changed the animation-fil-mode of .animationComplete to backwards and it did the trick :)
.animationComplete {
animation-name: complete;
animation-delay: 0.3s;
animation-duration: 1.0s;
animation-timing-function: ease-out;
animation-fill-mode: backwards;
}
I Want the motion to work, but the background image position is fixed and does not move, why ?
#-webkit-keyframes anima {
from {
background-position: left;
} to {
background-position: right;
}
}
#bando {
border-radius: 4px;
background-image: url(neon.jpg);
background-size: 120%;
width: 600px;
padding-top:40px;
padding-bottom:40px;
margin-bottom: 10px;
font-size: 30px;
height:200px;
animation-name: anima;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
Thanks for helping
For this to work, make sure the image is bigger (or smaller) than the element, like in below sample, where the element is 600px wide and the image 800px
#-webkit-keyframes anima {
from {
background-position: left;
}
to {
background-position: right;
}
}
div {
border-radius: 4px;
background-size: 120%;
background: url(http://lorempixel.com/800/280/nature/1/);
width: 600px;
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 10px;
font-size: 30px;
height: 200px;
animation-name: anima;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
<div></div>
Another option is to use a pseudo element, as with that you can use transform to move the image, which I recommend and is a far more smoother and efficient way to do it
div {
position: relative;
border-radius: 4px;
width: 600px;
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 10px;
font-size: 30px;
height: 200px;
overflow: hidden;
}
div::after {
content: '';
position: absolute;
border-radius: 4px;
background-size: 120%;
background: url(http://lorempixel.com/800/280/nature/1/);
width: 800px;
height: 100%;
animation-name: anima;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
#-webkit-keyframes anima {
from {
transform: translateX(0);
}
to {
transform: translateX(-200px);
}
}
<div></div>
I have been trying all the morning to make this more smoother:
http://codepen.io/alexrts/pen/jbNrXo
-webkit-animation: pulse 1.4s ease-out;
-moz-animation: pulse 1.4s ease-out;
animation: pulse 1.4s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
As you can see, it looks a little bit robotic.
Does anybody knows if there's a way to do it without javascript?
Best,
Alex
You should make the easing linear
html {
background: #fff;
overflow: hidden;
font-family: Helvetica, Arial;
font-weight: 600;
font-size: 16px;
}
.live-cta {
position: absolute;
top: 45%;
left: 50%;
margin-left: -50px;
}
.live-icon {
position: relative;
width: 40px;
height: 40px;
float: left;
}
.live-text {
position: relative;
float: left;
margin: 12px 0 0 0;
color: #007aff;
}
.live-arrow {
background-image: url("http://s18.postimg.org/u8099c1c5/live_arrow.png");
background-size: 40px 40px;
background-repeat: no-repeat;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.live-pulse-min {
border: 4px solid #007aff;
background: transparent;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
height: 10px;
width: 10px;
position: absolute;
top: 11px;
left: 11px;
-webkit-animation: pulse 1.4s linear;
-moz-animation: pulse 1.4s linear;
animation: pulse 1.4s linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
z-index: 1;
opacity: 0;
}
.live-pulse-max {
border: 4px solid #007aff;
background: transparent;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
height: 28px;
width: 28px;
position: absolute;
top: 2px;
left: 2px;
-webkit-animation: pulse2 1.4s linear;
-moz-animation: pulse2 1.4s linear;
animation: pulse2 1.4s linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
z-index: 1;
opacity: 0;
}
#-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
50% {
-webkit-transform: scale(.5);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}
#-webkit-keyframes "pulse2" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
50% {
-webkit-transform: scale(.5);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}
<div class="live-cta">
<div class="live-icon">
<div class="live-arrow"></div>
<div class="live-pulse-min"></div>
<div class="live-pulse-max"></div>
</div>
<div class="live-text">LIVE</dive>
</div>
Try to specify a linear easing by adding this line of css to your specified animations:
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
I edited your code here.