I'm trying to implement some CSS Keyframe animations on my application, which get triggered on different events.
The animation consists of a unicorn flying up from the bottom of the screen, stopping in the middle for a second, and then moving up out of the screen. The problem comes when different users have different amounts on content on the page, making the page height bigger.
I want the animation to stop for a second relative to users position, in the middle of the users view, not relative to the page height.
This is my code so far:
<img src="../***" v-if="aCounter === 1" class="unicornUp" alt="Unicorn">
.unicornUp {
position:absolute;
width:50%;
height:50%;
right:20%;
opacity: 0;
z-index:99;
animation-name: unicornMoveUp;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-delay: 0.5s;
}
#keyframes unicornMoveUp {
from { bottom: 0; opacity: 1;}
20% {bottom:20%;opacity: 1;transform: rotate(5deg);}
40% {bottom: 50%;opacity: 1;}
60% {bottom: 50%;opacity: 1; transform: rotate(-5deg);}
80% {bottom: 60%; opacity: 1;}
100% {bottom: 90%; opacity: 0;}
}
I've been thinking about a sticky parent div, but I'm not sure if this is even correct and where to start. Any help would be appreciated!
Try position: fixed instead, as as opposed to position: absolute which is relative to the entire document, fixed is relative to the viewport i.e. the screen
Related
I'm working on a website and i had no idea how to make an image rotating infinitely around a static logo.
I don't have any code as I am not familiar with web coding, so if anyone here can provide a codepen or jsfiddle?
My website is working on 100% html, css and js.
I've googling a lot of article but none of it is exactly as I want.
I expect for a HTML code with CSS and JS
Based on the answer
How to animate image circular in css
you can do the following:
HTML:
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
CSS:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
That man also added a jsFiddle link for you to see the effect of above one.
http://jsfiddle.net/aquadk/m23sadrz/
A simple way is to add a CSS class to your image element and use keyframe animations.
https://codepen.io/limxz/pen/GLZdJN
As you can see from the demo, you have to define a keyframe (it's kind of like an animation sequence) and then add the parameters to control it.
#keyframes infinite-spinning {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.image-to-spin {
animation: infinite-spinning 1s infinite;
}
As I understand you need effect like moon rotating around the earth. You'll be able do it using CSS animation and transform-origin attribute.
transform-origin change your rotation point of the object. Normally transform-origin is located at center of the object but changing X and Y attributes for the transform-origin you will able to change the rotation point.
here is a example
<div class="logo-wrapper">
<h1>LOGO</h1>
<span class="img"></span>
</div>
replace span.img with your desire image
Hope this will help you!
Does anyone have an idea on how I can rotate a DIV Cube on a mobile Device, like a Smartphone, by touch the screen and moving a finger?
Take a look at the following example:
https://codepen.io/tsluga/pen/mjMpVa
As you can see, I currently have an animation with the following piece of code:
<pre>
.cube {
position: relative;
transform-style: preserve-3d;
animation-name: myAnimation;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes myAnimation {
0% {
transform: rotate3d(0, 0, 0, 0);
}
100% {
transform: rotate3d(0,1, 0, 360deg);
;
}
}
</pre>
How could I implement a touchevent? If someone presses the screen and slides over the screen/cube, I want to rotate the cube instead of the animation currently implemented.
Thanks for any Feedback
I'm trying to coding this text animation effect (please see video) but i'm quite far from solution!!
Can you please help me? maybe is better using js?
h1.fadeinone { animation: fadeinone 10s;}
h1.fadeintwo { animation: fadeintwo 10s;}
h1.fadeinthree { animation: fadeinthree 10s;}
#keyframes fadeinone {
0% {
opacity: 0;
}
33% { /* 3s for fade in */
opacity: 1;
}
}
#keyframes fadeintwo {
0% {
opacity: 0;
}
66% { /* 3s for fade in */
opacity: 1;
}
}
#keyframes fadeinthree{
0% {
opacity: 0;
}
100% { /* 3s for fade in */
opacity: 1;
}
}
#claim h1 {
font-size: 40px;
line-height:40px;
margin:0px;
padding:0px;
color:#FFF;
}
#claim {background-color:red;}
<div id="claim">
<h1 class="fadeinone">DESIGN</h1>
<h1 class="fadeintwo">loren ipsum</h1>
<h1 class="fadeinthree">DOLOR SIT</h1>
</div>
I think you are looking for the animation-delay property. It's a bit tedious, because you'll have to separate out each letter of each line into its own element (I used span in this case), and then you'll have to manually assign each span its own delay, but the effect matches what you provided.
Also, by using this method, you only need one set of keyframes, because you'll be using the delay to determine when the animation starts, rather than using a percentage over multiple animations.
div span
{
opacity: 0;
animation-name: fadein;
animation-duration: 3s;
animation-fill-mode:forwards;
}
div span:nth-child(1){animation-delay:0s}
div span:nth-child(2){animation-delay:0.2s}
div span:nth-child(3){animation-delay:0.4s}
div span:nth-child(4){animation-delay:0.6s}
div span:nth-child(5){animation-delay:0.8s}
div span:nth-child(6){animation-delay:1s}
#keyframes fadein
{
0%{opacity: 0}
100%{opacity:1}
}
<div>
<span>D</span><span>E</span><span>S</span><span>I</span><span>G</span><span>N</span>
</div>
Of course, you could do this with Javascript and the solution would likely be more elegant and easier to modify; however, then you have to deal with compatibility issues. You're going to be better off just sticking with strict CSS whenever possible.
I am using WOW.js and animate.css, right now I am running my CSS to Infinite. I would like know how can I make my class run for 3 seconds stop and start again to infinite?
My html:
<img src="images/fork.png" class="fork wow rubberBand" >
My CSS class:
.fork {
position: absolute;
top: 38%;
left: 81%;
max-width: 110px;
-webkit-animation-iteration-count: infinite ;
-webkit-animation-delay: 5s;
}
The solution can be in JS or CSS3.
With pure CSS3 animations, one way to add a delay between every single iteration of the animation would be to modify the keyframes setting such that they produce the required delay.
In the below snippet, the following is what is being done:
The whole duration of the animation is 6 seconds. In order to have the delay, the whole duration should be the duration for which your animation actually runs + time delay. Here, the animation actually runs for 3s, we need a 3s delay and so the duration is set as 6 seconds.
For the first 50% of the animation (that is, 3 seconds), nothing happens and the element basically holds its position. This gives the appearance of the 3 second delay being applied
For the next 25% of the animation (that is, 1.5 seconds) the element moves down by 50px using transform: translateY(50px).
For the final 25% of the animation (that is, last 1.5 seconds) the element moves up by 50px using transform: translate(0px) (back to its original position).
The whole animation is repeated infinite number of times and each iteration will end up having a 3 second delay.
div{
height: 100px;
width: 100px;
border: 1px solid;
animation: move 6s infinite forwards;
}
#keyframes move{
0% { transform: translateY(0px);}
50% { transform: translateY(0px);}
75% { transform: translateY(50px);}
100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>
The animation-delay property introduces a delay only for the first iteration and hence it cannot be used to add delays between every iteration. Below is a sample snippet illustrating this.
div{
height: 100px;
width: 100px;
border: 1px solid;
animation: move 6s infinite forwards;
animation-delay: 3s;
}
#keyframes move{
0% { transform: translateY(0px);}
50% { transform: translateY(50px);}
100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>
LIke this
html
<div class="halo halo-robford-animate"></div>
css
body{
background: black;
}
.halo{
width: 263px;
height: 77px;
background: url('http://i.imgur.com/3M05lmj.png');
}
.halo-robford-animate{
animation: leaves 0.3s ease-in-out 3s infinite alternate;
-webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}
#-webkit-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#-moz-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#-o-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5
}
100% {
opacity: 1;
}
}
jsfiddle
I have a DIV with some text in it. I added a background image on it. Now I want to keep scrolling my DIV background image from bottom to top smoothly. For this purpose, I searched for the code and I found some codes...
<style type="text/css">
#moving_bg {
background-image:url('http://i.imgur.com/zF1zrkC.jpg');
background-repeat:repeat-y;
color:#FFFFFF;
width:1000px;
height:300px;
text-align:center;
}
</style>
<div id="moving_bg">
<h2>This is my DIV text that I want do not want to move/animate.</h2>
</div>
CODE 1:) http://jsfiddle.net/ZTsG9/1/ This is a code that I found but this one have some problems with me. First of all its moving horizontally and second is that its making image width doubled to 200% that I dont want also.
CODE 2:) http://jsfiddle.net/hY5Dx/3/ This one is also moving horizontally and not making the image width doubled. But its JQuery that I dont want.
I want only CSS3 or JavaScript with HTML code to move my background image in DIV from bottom to top without doubling the image width. Is this possible in these two web languages...???
If you can get away with using 2 divs you can get it to work like this:
Working Example
html, body {
height: 100%;
margin: 0;
}
.outer {
height:100%;
overflow: hidden; /* hide the overflow so .inner looks like it fits in the window*/
}
.inner {
height:200%; /* the inner div will need to be twice as tall as the outer div */
width:100%;
-webkit-animation:mymove 5s linear infinite;
animation:mymove 5s linear infinite;
background-image: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg');
background-size: 100% 50%; /* 50% height will be 100% of the window height*/
}
#-webkit-keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
#keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
As per Muhammad's request i'll add my fiddle as an answer.
VanillaJS using requestAnimationFrame for that butter smooth slide :)
http://jsfiddle.net/hY5Dx/103/
Code to please SO:
var y = 0;
requestAnimationFrame(move);
var body = document.body;
function move(){
y++;
body.style.backgroundPosition = '0 ' + y + 'px';
requestAnimationFrame(move);
}
As there is too much comments after #Skynet answer, here I add the one I wrote following his base structure.
So in CSS, you can make use of animation CSS property
This property still is vendor-prefixes dependant.
Basically for what you want to do, you have to animate the background-position property, only on y axis.
Here is the CSS code
/* Following defines how the animation 'mymove' will run */
#keyframes mymove {
/* 0% is the beginning of animation */
0% {
background-position: 0 0;
}
/* This is the end… where we set it to the size of the background image for y axis (0 being the x axis) */
100% {
background-position: 0 860px;
}
}
/* same for webkit browsers */
#-webkit-keyframes mymove {
0% {
background-position: 0 0;
}
100% {
background-position: 0 860px;
}
html, body {
height: 100%;
}
.view {
color:#FFFFFF;
height: 366px;
text-align:center;
/* Here we assign our 'mymove' animation to the class .view, we ask it to last 3 seconds, linearly (no ease at start or end), and repeating infinitely */
animation: mymove 5s linear infinite;
/* again webkit browsers */
-webkit-animation:mymove 5s linear infinite;
background: url('http://i.imgur.com/zF1zrkC.jpg');
}
And here we are.
The other answers are ok but as mentionned, using multiple divs isn't always possible and the use of requestAnimationFrame() is also browser specific (Paul Irish has good polyfill for this).
Furthermore, I'm not sure incrementing a var infinitely is a good solution : it will block near 6100000px, and its much more code to change the speed or to take control over the animation.
<div class="view" style="background-image: url('http://i.imgur.com/zF1zrkC.jpg')">According to a new report from AnandTech.</div>
html, body {
height: 100%;
}
.view {
color:#FFFFFF;
width:1000px;
height:300px;
text-align:center;
-webkit-animation:mymove 5s linear infinite;
/* Safari and Chrome */
animation:mymove 5s linear infinite;
background-size: 200% 100%;
background-repeat: repeat-y;
}
#keyframes mymove {
100% {
transform: translate3d(0px, -400px, 0px);
}
}
#-webkit-keyframes mymove
/* Safari and Chrome */
{
100% {
transform: translate3d(0px, -400px, 0px);
}
}
check jsfiddle