This is making me crazy and I hope that someone can give me a simple solution.
So I have a app on my website that allows you to like or dislike Recipes. When disliking there is an animation sending the image to the left, when liking the animation sends the image to the right (based on the Tinder swiping).
On my laptop everything works fine, but when I load the website on my mobile phone after the left animation is done the page is going back to the top, making me scroll back down every time I like something.
The dislike button works just fine. And if I change the Yes animation to the exact same like the No, it works. So it's really something with that animation.
I think the issue is caused because the image goes out of the screen and it then loads back at the top. But I don't understand why it doesn't happen when going to the left and I can't find a good solution
#keyframes yes {
0% {
transform: scale(1) rotateZ(0deg);
left: 0;
}
30% {
transform: scale(1.05) rotateZ(0deg);
left: 0;
}
100% {
transform: rotateZ(45deg);
left: 400px;
}
}
.animateYes {
animation-fill-mode: both;
animation: yes 0.6s linear;
}
.animateYes:before {
transform: rotateZ(-35deg);
background: url(https://i.imgur.com/Zkwj970.png) no-repeat center 10px;
}
#keyframes no {
0% {
transform: rotateZ(360deg);
right: 0;
}
30% {
transform: scale(1.05) rotateZ(360deg);
right: 0;
}
100% {
transform: rotateZ(315deg);
right: 400px;
}
}
.animateNo {
animation-fill-mode: both;
animation: no 0.6s linear;
}
.animateNo:before {
transform: rotateZ(35deg);
background: url(https://i.imgur.com/XqQZ4KR.png) no-repeat center 10px;
}
This is the website: http://ons-kookboek.atwebpages.com/test.html
I'm a beginner in everything about html and CSS and most of my website is copy paste from the internet without me understanding what it exactly does.
I want to display an animated loading icon when the user have submitted a search.
SEQUENCE OF EVENTS I'M LOOKING FOR:
USER SUBMITTED A SEARCH
MAKE LOADING ICON VISIBLE
MAKE LOADING ICON INVISIBLE ONCE THE SEARCH IS COMPLETED
The issue I'm facing is mostly css.
Firstly, the loading icon seems to be behind the form element.
Secondly, I cannot increase the size of the div (searchEngineForm) to have the same size as the form.
Lastly, I cannot set div (searchEngineForm) width to 100%. It goes outside of the form.
Here is my code:
HTML:
<form action="setJobFields" method="POST">
<div id="searchEngineForm" style="display: none;">
<div class="loader">
</div>
</div>
...
</form>
CSS:
#searchEngineForm{
position: absolute;
/* width: 100%; */
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
To set an html element above others, you could set its Z-index to a higher number than what’s around it.
For example, say you’re wanting to display your loading symbol in front of the rest of the page. You could contain the whole page in a single div, for the sake argument we give it a class of “page”, we can set it as:
.page{ z-index: -1 ;}
And the loader as
.loader{ z-index: 1; }
Then, to position it where you want, you can set the position to absolute and move it around with the top and left properties, such as
.loader{ z-index:1; position: absolute; top: 50%; left: 50%; }
Good day,
I am trying to make a nice animation for a website.
It should be relatively simple. So I have drawn a hand and a BMW car key. Used a css code to make it swing and yes it works.
However it is responsive but not in the way I want it to be. I'd like the key to stay in place where it is. However it is moving just about anywhere depending on the screen size.
I could of course use screen size in css. But I don't want to use screen size. I want to be able to place the animation about anywhere where I'd like it to be.
However when resizing the key moves also anywhere where it would like to be :-/
Probably my approach is entirely wrong. But at this point this is what I'd could come up with. Maybe it is right. But I hope that someone could tell me where and how to correct my mistakes.
My HTML code (of course bootstrap and others are linked in the header)
#-webkit-keyframes swinging {
0% {
-webkit-transform: rotate(10deg);
}
50% {
-webkit-transform: rotate(-5deg)
}
100% {
-webkit-transform: rotate(10deg);
}
}
#keyframes swinging {
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(-5deg)
}
100% {
transform: rotate(10deg);
}
}
.swingimage {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
animation: swinging 3.5s ease-in-out forwards infinite;
}
.key_hand {
/*
background-image: url('arm_hand.png');
background-repeat: no-repeat;
background-size: 100%; */
min-height: 900px;
}
.key_hand>.complete_arm {
position: relative;
width: 100%;
z-index: 2;
}
.key_hand>.bmw_key {
position: relative;
display: inline-block;
top: -390pt;
left: 7%;
z-index: 1;
width: 10%;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
animation: swinging 3.5s ease-in-out forwards infinite;
}
<div class="container">
<div class="row">
<div class="col-md-12 key_hand">
<img src="arm_hand.png" class="complete_arm" />
<img src="complete_bmw_key.png" class="bmw_key" />
</div>
</div>
</div>
I have created the following pen. Hoping to shed some light on this case.
https://codepen.io/slalex/pen/GXxMmg
Removing min-height: 900px from .key_hand, and replacing pt by % for the top positioning of .key_hand > .bmw_key, it should be great. Here is the result
Hope it look like what you were waiting for, and bravo for your drawing !
I've followed a short tutorial to create a bouncing arrow however the code I've used it pretty much the same excluding small differences.
However, when I add it to my hero unit, it doesn't play my animation.
It could be the transform or keyframe mixins I used...
Here is the JSFiddle: http://jsfiddle.net/x9hxfusa/
Place the keyframes & mixins declarations at the top. You have to declare them before calling them.
See Demo
I tweaked and simplified your code, I think you can arrange the animation itself to be smoother, up to your liking. Remember to add cross browser support or at least use SCSS to manage it: jsFiddle
CSS
body { background-color: black; }
.arrow {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 40px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
-webkit-animation: bounce 2s infinite;
}
#-webkit-keyframes bounce {
0% { bottom:5px; }
25%, 75% { bottom:15px; }
50% { bottom:20px; }
100% { bottom:0; }
}
I also think the key issue is with the mixins, however I stirred away from it to find a simpler solution for you.
Edit: I tried doing the following initially but I missed refreshing my jsFiddle and missed the obvious solution, which is now highlighted by #Oriol. Anyways, the issue is that your keyframe & mixin code is being positioned after the animation code (or at the top of your CSS for simplicity's sake). If you wish to keep your code as is just do that, or you can try my simplified solution.
You must declare
#mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
#mixin keyframes($animation-name) {
#-webkit-keyframes $animation-name {
#content;
}
#-moz-keyframes $animation-name {
#content;
}
#-ms-keyframes $animation-name {
#content;
}
#-o-keyframes $animation-name {
#content;
}
#keyframes $animation-name {
#content;
}
}
#mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
before include keyframes and transform. You must also set the bounce class in a different way (remove ''):
.bounce {
#include animation(bounce 2s infinite);
}
http://jsfiddle.net/uth333cg/
Hello I wondering if there is a transition to make the purple div (the one that slides down when you hover over the feeling down? picture) bounce when it reaches the end?
here is the code- and jsFiddlle Demo link
HTML
<div class="img">
<div class="hover"><h2>project 1</h2></div>
</div>
CSS
.img {
width: 457px;
height: 288px;
background-image: url("http://i59.tinypic.com/xdulh2.png");
position:relative;
overflow:hidden;
}
h2 {
font-family: avenir;
font-weight: bold;
font-size: 40px;
color: #000;
}
.hover {
position:absolute;
top:-100%;
width: 457px;
height: 288px;
background: rgba(130,76,158,0.5);
-webkit-transition:all 1s;
}
.img:hover .hover {
top:0;
}
an example of the transition i mean you can see here http://www.ollygibbs.com
CSS Transition doesn't have bounce-style timing function, so we have to code it with CSS animation keyframes. The problem here is - how to easily decompose a bouncing ( or any other ) functions into a keyframe series over certain style?
This was the problem I encountered when I build transition.css, so I built a tool "easing.css" to help me generate keyframes from arbitrary equations.
The idea is simple; say we want to make a bounce effect:
we first make a timing function f(t) for our desired effect, such as
Math.abs(Math.sin(1.2 + (t ** 1.4) * 23)) * ( 1 - t ) ** 2.8
according to how the output of this function changes, we sampled this function with different interval from 0 to 1.
use the sampled (t, f(t)) pairs to generate the css animation keyframes.
apply the result animation when we need a transition.
with the concept above, easing.css also provides several timing function preset so you can play with. Below is a 15-frames bouncing animations generated via easing.css, you could make it more like a real bounce by increasing the frame count or tweaking the timing function provided:
.your-block {
animation: YourAnimation 2s linear 1s;
}
#keyframes YourAnimation {
0% { height: 7px; }
8% { height: 24px; }
10% { height: 36px; }
17% { height: 99px; }
19% { height: 83px; }
21% { height: 69px; }
24% { height: 57px; }
25% { height: 56px; }
27% { height: 59px; }
34% { height: 100px; }
36% { height: 88px; }
38% { height: 80px; }
48% { height: 100px; }
72% { height: 100px; }
100% { height: 100px; }
}
The animate.css library will give you a more complete setup and you can choose and pick the ones you need, but if you must code your own, use this code I included in a CODEPEN
Basically, you instantiate the bounce effect with the following crossbrowser code. This code establishes the bounce, speed of bounce, and the direction it will bounce. You can choose ease-out if you want to.
Now, Bouncing is a tricky thing. Because it must go up and down until it stops. so the bounces must gradually decrease the height. So, this is why you need #-keyframes, (notice you will need #-webkit-keyframes and #-moz-keyframes, etc for a more complete cross browser development. These keyframes allow you to break the effect at any point. In a bouncing effect in particular, the effect breaks every 10% by reducing it's position in the Y axis (which it means height), until it finally stops.
-webkit-animation: bounce 1200ms ease-in;
-moz-animation: bounce 1200ms ease-in;
-o-animation: bounce 1200ms ease-in;
animation: bounce 1200ms ease-in;
Hope that helps you.
p.s. my code looks a little buggy but you'll have a good enough start. I added your code in your fiddle to it too
Hey as previous suggested animate.css is pretty good with css animations, but to have more control over the animation you can add it with js. You just have to add an small script.
$('.img').hover(function(){
$('.hover').addClass('animated bounceInDown');
}, function() {
$('.hover').removeClass('bounceInDown');
$('.hover').addClass('bounceOutUp');
setTimeout(function() {
$('.hover').removeClass('animated bounceOutUp');
}, 1000);
});
Check out this fiddle example
After that, you just need to play with the values on the .bounceInDown .bounceOutUp keyframes annimation (if you want to).
So that the animation is more or less bouncy
#keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -60px, 0);
transform: translate3d(0, -60px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -800px, 0);
transform: translate3d(0, -800px, 0);
}
}
Another way (with jquery) of doing this will be using jQuery .animate and easing plugin.
<div id="example">
<p class="bounce"></p>
</div>
div {
width: 200px;
height: 200px;
background: red;
}
.bounce {
width: 100%;
height: 0px;
background: rgba(134,12,12,.4);
}
$('#example').on('mouseenter',function(){
$('p').animate(
{ height: "200px" },
1000,
"easeOutBounce"
);
})
[js fiddle example][1] [1]: http://jsfiddle.net/2ra7yumo/2/
It gives you little bit more(or easier) control on the animation.