I makes css keyframes for parallax animate. In Chrome, Opera I have smooth transition.
In Safari I have very braking animate.
#keyframes animatedParallelogram {
0 {
background-position: 1000px 0px;
transform: translateX(-100%) scale(1.1);
}
100% {
background-position: -1000px 0px;
transform: translateX(100%) scale(1.1);
}
}
#-moz-keyframes animatedParallelogram {
0 {
background-position: 1000px 0px;
-moz-transform: translateX(-100%) scale(1.1);
}
100% {
background-position: -1000px 0px;
-moz-transform: translateX(100%) scale(1.1);
}
}
#-webkit-keyframes animatedParallelogram {
0 {
background-position: 1000px 0px;
-webkit-transform: translateX(-100%) scale(1.1);
}
100% {
background-position: -1000px 0px;
-webkit-transform: translateX(100%) scale(1.1);
}
}
#-o-keyframes animatedParallelogram {
0 {
background-position: 1000px 0px;
-o-transform: translateX(-100%) scale(1.1);
}
100% {
background-position: -1000px 0px;
-o-transform: translateX(100%) scale(1.1);
}
}
You can open my example and try to slide down: OPEN EXAMPLE
Unfortunately, Safari have braking animate, if used CSS animate «background-position» and other transform animation together.
Related
I'm looking for solution to my problem. I want to zoom in and out without stoping every second in a div with backgroung-image.
Something like this fruit in the game:
https://www.google.co.il/search?source=hp&ei=ghU7XfaEBai4gwfA6rrIDA&q=snake&oq=snaj&gs_l=psy-ab.1.0.35i305i39j0i10l9.776.1740..2868...0.0..0.192.754.0j5......0....1..gws-wiz.....0..35i39j0i131j0j0i67.KPZVLy3h8CU
I find the solution below but I use react so I need css/js solution and not jQuery one.
Zoom an image every one second jQuery
The solution is to use CSS "breathing" animation. An example how it works:
#breathing-button {
width: 270px;
padding: 20px;
margin: 50px auto;
border: 1px solid #d1d1d1;
-webkit-animation: breathing 7s ease-out infinite normal;
animation: breathing 7s ease-out infinite normal;
font-size: 24px;
background: #5885cb;
color: #fff;
-webkit-font-smoothing: antialiased;
border-radius: 3px;
text-align: center;
}
#-webkit-keyframes breathing {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
}
60% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
#keyframes breathing {
0% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
25% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
60% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
}
<div id="breathing-button">Breathing Button</div>
I want an element to be animated like a swaying plant. I am looking to animate a div in the following manner.
Fix the bottom
Move the head back and forth
Looking for full css solution.
I have tried this,
#keyframes wiggle {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-1deg);
}
50% {
transform: rotate(2deg);
}
75% {
transform: rotate(-0.4deg);
}
100% {
transform: rotate(1deg);
}
}
You can set transform-origin property to bottom.
.el {
margin: 30px 50px;
width: 0;
height: 0;
border-style: solid;
border-width: 150px 50px 0 50px;
border-color: #007bff transparent transparent transparent;
animation: wiggle infinite 3s alternate;
transform-origin: bottom;
}
#keyframes wiggle {
0% {transform: rotate(0deg);}
25% {transform: rotate(-3deg);}
50% {transform: rotate(5deg);}
75% {transform: rotate(-1deg);}
100% {transform: rotate(2deg);}
}
<div class="el"></div>
I have created this arrow that bounces and I want to add a pause for like 2 seconds between the bounces. I found a couple of similar examples here but they didn't work for my arrow (changed the bouncing animation).
If i add the following I get a pause but only once:
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
Anyway, here is the code:
HTML:
<div class="btn-bottom"></div>
CSS:
.btn-bottom{
width: 48px;
height: 58px;
background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/10897-200.png")
center center no-repeat;
background-size: 47px;
margin: auto;
top: 40px;
left: 0;
right: 0;
cursor: pointer;
-webkit-animation: bounce 2.5s infinite;
animation: bounce 2.5s infinite;
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px);
}
}
JSFIDDLE:
https://jsfiddle.net/92xmw541/
Easiest way is to make the duration of the animation longer (4s below) and use half of the animation time with the keyframes. The rest of the keyframes the object will be at rest.
.btn-bottom {
width: 48px;
height: 58px;
background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/10897-200.png") center center no-repeat;
background-size: 47px;
margin: auto;
top: 40px;
left: 0;
right: 0;
cursor: pointer;
animation: bounce 4s infinite;
}
#keyframes bounce {
10%,
20%,
30%,
40%,
50% {
transform: translateY(0);
}
15% {
transform: translateY(-30px);
}
25% {
transform: translateY(-15px);
}
35% {
transform: translateY(-5px);
}
45% {
transform: translateY(-2px);
}
}
<div class="btn-bottom"></div>
Here is a pure Javascript solution I ended up with to achieve a delay between CSS animations (like animate.css).
function repeatAnimate(element, delay) {
delay = delay || 5000;
setTimeout(function () {
element.style.webkitAnimation = 'none';
setTimeout(function () {
element.style.webkitAnimation = '';
repeatAnimate(element, delay);
}, 10);
}, delay)
}
Usage:
$(function () {
var element = document.getElementsByClassName('btn-play')[0];
repeatAnimate(element, 2000);
});
In this case the animated and bounce classes are already present in the HTML markup.
I'm having trouble with what I believe is a bug in Safari, every other Browser shows it correctly.
http://codepen.io/anon/pen/pvavVa
html looks like this:
<div id="background"></div>
<div id="midground"><div id="baggy"></div></div>
CSS like this:
#keyframes ex4 { /* CSS3 */
0% { -webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
100% { -webkit-transform: translate(0px, -5000px);
-moz-transform: translate(0px, -5000px);
-ms-transform: translate(0px, -5000px);
-o-transform: translate(0px, -5000px);
transform: translate(0px, -5000px); } }
#-moz-keyframes ex4 { /* CSS3 */
0% { -webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
100% { -webkit-transform: translate(0px, -5000px);
-moz-transform: translate(0px, -5000px);
-ms-transform: translate(0px, -5000px);
-o-transform: translate(0px, -5000px);
transform: translate(0px, -5000px); } }
#-webkit-keyframes ex4 { /* CSS3 */
0% { -webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
100% { -webkit-transform: translate(0px, 5000px);
-moz-transform: translate(0px, -5000px);
-ms-transform: translate(0px, -5000px);
-o-transform: translate(0px, -5000px);
transform: translate(0px, -5000px); } }
}
body {
font: 10px/2 "Lucida Grande", Helvetica, Sans-Serif;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
#background {
background: url("http://epicstudios.de/blackwhite/bg2.jpg") fixed repeat;
-webkit-background-size: 100vw auto;
-moz-background-size: 100vw auto;
-o-background-size: 100vw auto;
background-size: 100vw auto;
position: absolute;
background-position:center top;
height:400vh;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 100
;z-index: 199;
animation: ex4 150s infinite; /* CSS3 */
-moz-animation: ex4 150s infinite; /* Firefox */
-webkit-animation: ex4 150s infinite; /* Webkit */
}
#midground {
width:240px;
height:240px;
position:absolute;
left:0px; right:0px;
top:0; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:auto;
border-radius:500px;
z-index:200;
overflow:hidden;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
#midground:hover {
width:350px;
height:350px;
position:absolute;
left:0px; right:0px;
top:0px; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:hidden;
border-radius:0px;
z-index:200;
}
#baggy { background: url(http://epicstudios.de/blackwhite /bg_neg.jpg) repeat fixed;
background-position:center top; -webkit-background-size: 100vw auto;
-moz-background-size: 100vw auto;
-o-background-size: 100vw auto;
background-size: 100vw auto;
background-repeat: repeat-y;
height:600vh;
position:absolute;
left:0; right:0;
top:0; bottom:0;
margin:auto;
overflow:hidden; z-index: 201;animation: ex4 150s infinite; /* CSS3 */
-moz-animation: ex4 150s infinite; /* Firefox */
-webkit-animation: ex4 150s infinite; /* Webkit */
}
The div in the center there should be a Circle, but safari shows a square. In this circle there's a div, that is larger than the circle and is moving because of a css-animation. As soon as I apply this animation to that div, the overflow:hidden and/or the border-radius:50% of the circle-div above it stop working and it appears as a square in safari.
I hope that's clear. I can't use JavaScript for the animation because I tried that before, and it worked, but it proved to be too difficult to process on most computers and the site started lagging and stuttering heavily.
http://codepen.io/anon/pen/pvavVa
I am trying to create a scroll down indicator.
I am using bourbon mixin library (http://bourbon.io/) with scss in my project.
It does work as intended and bouncy in firefox and IE. However, in every other browser (webkit) it does not. Why?
Here is the code:
HTML
<div class="arrow animated bounce"></div>
CSS
/* Scroll down indicator (bouncing) */
#include keyframes(bounce) {
0%, 20%, 50%, 80%, 100% {
#include transform(translateY(0));
}
40% {
#include transform(translateY(-30px));
}
60% {
#include transform(translateY(-15px));
}
}
.arrow {
position: absolute;
top: 94%;
left: 0;
width: 50px;
height: 50px;
background-image: url('/imgs/arrow.svg');
}
.bounce {
animation: bounce 2s infinite;
}
The outputted CSS:
/* Scroll down indicator (bouncing) */
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0); }
40% {
-webkit-transform: translateY(-30px); }
60% {
-webkit-transform: translateY(-15px); } }
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0); }
40% {
-moz-transform: translateY(-30px); }
60% {
-moz-transform: translateY(-15px); } }
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
40% {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px); }
60% {
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px); } }
I am very thankful for any kind of help!
It's because Webkit requires a prefix on the animation property in your .bounce class
.bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
JSfiddle Demo
Or maybe you could just use #include animation(bounce 2s infinite);
For things to work with Bourbon as expected you need to use both animation() and keyframes() like so:
.myclass {
#include keyframes(myAnimation) {
from { background-position: 0px 0px;}
to { backgorund-position: 10px 10px; }
}
#include animation(myAnimation 10s linear infinite);
}
That'll output properly prefixed CSS and things will work as expected in newer browsers.