I'm practicing CSS animations by making a loading spinner. It's just 4 boxes moving in and out of view. I have it working as intended in VS Code when I just run the .html file. However, when I tried it in an actual angular project with a large data pull, the animation will mess up mid way through.
Posted below is the "blue box", which grows to the right, scaleY toward the bottom, and scaleX toward the left. All the boxes do this same thing, just in different directions with different delays, so there are a total of 16 keyframes in the file. The first loop is usually fine, however, on the second or third, the transform origin of this blue box and another gray box will switch, so the blue box will grow to the left, and the gray box to the right (when it's supposed to be going left). And then the transform origin of the scaleX and scaleY will randomly switch as well (this happens on Firefox, on Chrome or Edge, the animation will just freeze).
I don't get it, is it too much processing power when combined with the data pull?
.boxes .blue-box {
width: $box-width;
height: $box-height;
position: absolute;
background: blue;
left: $blue-left;
top: $blue-top;
transform: scaleX(0) translateZ(0);
opacity: 0;
transform-origin: left;
animation: moveBlue $animation-length infinite;
border: 3px solid rgb(0, 0, 180);
}
#keyframes moveBlue {
13% {
transform: scaleX(1);
opacity: 1;
animation-timing-function: ease-out;
transform-origin: left;
}
51% {
transform: scaleX(1) scaleY(1);
transform-origin: bottom;
}
63% {
transform: scaleX(1) scaleY(0.1);
transform-origin: bottom right;
opacity: 1;
}
75% {
transform: scaleX(0) scaleY(0.1);
transform-origin: bottom right;
animation-timing-function: ease-out;
opacity: 0;
}
}
You should be careful when to display the loader and when to remove it. I have added an example below. call the loader when you are getting results from the api and before you display the results, make suer you clear the loader. In so doing, the loader will not be affected midway data pull.
Related
Hello I am trying to make a 'Sliding Pages animation', but it is just one page, or div. I want when I click a button. The div slides out of the page to the left, and comes out thorough the right.
For instance
| Animation
| <--- Div <-----
|
Here is a simple example where the div first slides out completely to the left and then comes in from the right.
It uses CSS animation to do this, for the first half of the animation sliding it to the left and out of view and for the second half sliding it in from the right.
Note, there is a little 'fiddle' at the half way point where we take the div from the left to the right, but with opacity very temporarily at 0. This is to prevent any possibility of a slight 'flash' as the div is moved across the screen.
const div = document.querySelector('div');
const button = document.querySelector('button');
div.addEventListener('animationend', function() {
div.classList.remove('move');
});
button.addEventListener('click', function() {
div.classList.add('move');
});
* {
margin: 0;
}
button {
position: fixed;
z-index: 1;
}
div {
background-image: linear-gradient(to right, red, blue);
color: white;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.move {
animation-name: move;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-100%);
opacity: 1;
}
50.001% {
opacity: 0;
transform: translateX(100vw);
}
50.002% {
opacity: 1;
transform: translateX(100vw);
}
100% {
transform: translateX(0);
}
}
<button>Click me</button>
<div>This is the div</div>
There's not really enough information about what you're trying to achieve, and what you're already working with. Hopefully some of this helps.
Based off of your tags, I assume you're trying to achieve this with CSS alone. In which case you can use a keyframe animation to adjust the div's margin offset.
You can find more specifics about CSS animations here:
https://www.w3schools.com/css/css3_animations.asp
In order to accomodate the trigger for the keyframe animation, you could potentially create a hidden checkbox, and create a class for when it's :checked to start the animation. If you do use an animation to move the div off page, then you will probably also want to set the parent to hide overflow as well.
JavaScript would probably be cleaner, but you haven't really provided much information about what you're working with.
I have a series of images on-screen in bootstrap 3 panels (3 per row for large screens).
When you click on an image I have it set up so that it applies a CSS class which does a 'scale(2)' on the image, this all works fine, but I want those images to be visible and scale themselves on screen.
Images in column 1 end up slightly off-screen to the left, Images in column 3 end up slightly off-screen to the right, Images in column 2 are for the most part fine.
Ideally I would like them to scale into the centre of the viewport itself, or at least just not render off-screen at all.
CSS:
.zoom {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.zoom-click {
-ms-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
position:relative;
z-index:100;
border: 2px solid DarkRed;
}
Upon clicking on the image it adds/removes the 'zoom-click' class.
I have tried using 'translate' along with the 'scale' however it is relative to the image itself, have also tried using 'transform-origin'.
**Update: ** Have created a jsfiddle showing how it is at present (minus the knockoutjs code which actually creates each of the 'main-image-panel' panels.
https://jsfiddle.net/tczh1sxq/2/
Figured it out. I always seem to have difficulty at times with the more complex CSS.
Anyway, fixed it by doing:
#images > div .zoom-click { transform-origin: top; }
#images > div:nth-child(3n+0) .zoom-click { transform-origin: top right; }
#images > div:nth-child(3n+1) .zoom-click { transform-origin: top left; }
Be nice if I could get it to actually go into the centre of the viewport, but this will suffice, looks much neater now that it isn't off-screen on the edges.
this might help,
.zoom-click
{
position: absolute;
height: 50%;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
You can use any height/ width you want. If the image is contained within any positioned element, you can use position: fixed and it will still work
Just an idea tried to resolve your issue. I used different tranform-origin based on child element index value as like nth-child,
$('.child').click(function(){
var index = $(this).index()+1;
if((index%3)==1){
$(this).find('img').css({
'transform': 'scale(2)',
'transform-origin': 'top left'
});
}
else if((index%3)==2){
$(this).find('img').css({
'transform': 'scale(2)',
'transform-origin': 'top'
});
}
else if((index%3)==0){
$(this).find('img').css({
'transform': 'scale(2)',
'transform-origin': 'top right'
});
}
});
Find this fiddler for reference.
I was looking at the webpage http://www.cuttherope.net on the current Google Chrome 38.0.x and saw that there are 4 icons in the middle of the page. When the mouse is over it, it has an icon squeezing effect: as if the icon is a pudding or jello squeezed on the side by a hand, and then bounce back to its natural size again.
I wonder how it is done: is it by HTML5 / CSS3, or how else is it done. I saw this div
<div class="game-icon resize"></div>
and if I use the developer tool to set display: none on it, then the icon will go away and have nothing showing, so this should be the div showing the effect, but if I examine the computed values, I do see an icon as a background, but all the computed values do not change when the mouse is over it or out of it. How is this done and is it part of HTML5 / CSS3's new features?
(if I disable JavaScript and reload the page, the effect still works, so apparently it is not done by JavaScript).
Yes, this is part of the CSS3 features (mainly transform )
If you want to have a similar effect without having to manually code it, have a look at this :
http://daneden.github.io/animate.css/
You can easily animate an element simply by adding two classes to it.
Found it! Yes, it's CSS3, and specifically the [-webkit-]animation: resize 0.2s linear; property. Disable that one and the effect stops.
I would guess it goes something like this:
img:hover {
-webkit-animation: squeeze 0.5s;
animation: squeeze 0.5s;
}
#-webkit-keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
#keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
<img src="http://placehold.it/100x100">
The CSS the other answers have pointed out
.resize:hover {
-webkit-animation: resize 0.2s linear;
animation: resize 0.2s linear;
}
References the following keyframe animation which is elsewhere in the CSS
#-webkit-keyframes resize {
0% { -webkit-transform:scale(1, 1) }
50% { -webkit-transform:scale(1.1, 0.9) }
100% { -webkit-transform:scale(1, 1) }
}
#keyframes resize {
0% { transform:scale(1, 1) }
50% { transform:scale(1.1, 0.9) }
100% { transform:scale(1, 1) }
}
The name resize is what links the two - it's not a keyword - you could call it boing and use
animation: boing 0.2s linear;
...
#keyframes boing {
Etc.
The keyframes say
at the beginning, scale to 100% x 100%
50% through the animation, scale to 110% x 90%
at the end, scale back to 100% x 100%
And the 0.2s in the animation property tells it to take 0.2 seconds to do the entire animation. The animation starts as soon as the style is applied, in this case when you hover.
I'm trying to make an infinite horizontal slider with 3 rows of images.
It looks like this:
But as you see when the end of the rows of images arrive, there's a huge blank space while the image finally appears again.
You can test it live here: http://jsfiddle.net/tbergeron/q596y/6/
Here's the CSS behind it:
ul.lists {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
-webkit-animation: moveSlideshow 180s linear infinite;
-moz-animation: moveSlideshow 180s linear infinite;
}
ul.lists li {
list-style: none;
display: inline-block;
}
ul.lists li img {
display: inline-block;
width: 100px;
height: 100px;
}
ul.slider2 {
top: 140px;
}
ul.slider3 {
top: 280px;
}
#-webkit-keyframes moveSlideshow {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-300%);
}
}
#-moz-keyframes moveSlideshow {
0% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-300%);
}
}
What I'd like to happen is to never see that blank space, I would like it to roll on forever. Anyone has an idea on how to achieve this behavior?
Thanks and have a nice day.
basicly , You need to clone your elements.
At least many enough of the first ones to fill the entire width of the screen, or split into two differents tags, your elements.
So once a part of them, is gone left, you move them back to the right end to fill that empty space to keep scrolling without any gaps.
Your case requires javascript.
So many images wrapping line by line needs to clone the whole ul.
A good compromise could be to split content within two ul, so one can to next once of screen.
To duplicate the whole ul in the HTML document might not be a good idea and i would not advise to do so for text.
jQuery DEMO of your fiddle.
$(".lists.slider1").clone().appendTo("body");
$(".lists.slider2").clone().appendTo("body");
$(".lists.slider3").clone().appendTo("body");
But for small "marquee like" , you can use pseudo elements to clone the first few images.
For text of a known length(em) or known container's width , you may use text-shadow.
Pseudo and text-shadow avoid duplication of content.
Some horrible CSS example that demonstrate the cloning idea: http://dabblet.com/gist/5656795
Would like to know how to hide an div after a set of css3 animation. Here's my code:
#box {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 150px;
background-color: red;
}
#box:hover {
-webkit-animation: scaleme 1s;
}
#-webkit-keyframes scaleme {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(3);
opacity: 0;
display: none;
}
}
<div id='box'>
hover me
</div>
Here's the jsfiddle sample for better illustration:
http://jsfiddle.net/mochatony/Pu5Jf/18/
Any idea how to do hide the box permanently, best without javascript?
Unfortunately there is no best solution using only CSS3. Animations always return to theirs default values (see at Safari Developer Library).
But you can try to play with -webkit-animation-fill-mode property.
For example:
#box:hover{
-webkit-animation:scaleme 1s;
-webkit-animation-fill-mode: forwards;
}
It's at least not immediately return a box to display:block; state.
Using JavaScript you can do this by using webkitAnimationEnd event.
For example:
var myBox = document.getElementById('box');
myBox.addEventListener('webkitAnimationEnd',function( event ) { myBox.style.display = 'none'; }, false);
Example on jsFiddle
Change your animation definition to:
-webkit-animation:scaleme 1s forwards;
This is a value for the animation fill mode. A value of 'forwards' tells the animation to apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed.
Of course in your example the animation style will be removed when the hover is removed. At the moment I can see the need for a small piece of JavaScript to add a class which triggers the animation. Since the class would never be removed (until the page is reloaded) the div would stay hidden.
Since elements of CSS animations end in their original CSS state, make the original state hidden by scaling it to zero or removing its opacity:
div.container {
transform: scale(0);
-webkit-transform: scale(0);
}
or
div.container {
opacity: 0;
}
Once the animation is completed, the div will go back to its original CSS, which is hidden.
That can (kind of) be solved without using JavaScript. Since animations use keyframes, what you ask for is possible by setting the duration time to a way too high value, say 1000s, and letting you transition end at a low frame, for example 0.1%.
By doing this, the animation never ends and therefore stay in shape.
#box:hover {
-webkit-animation:scaleme 1000s;
}
#-webkit-keyframes scaleme {
0% { -webkit-transform: scale(1); opacity: 1; }
0.1%, 100% { -webkit-transform: scale(3); opacity: 0;display:none; }
}
1000s is not necessary in this particular example though. 10s should be enough for hover effects.
It is, however, also possible to skip the animation and use basic transitions instead.
#box2:hover {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
-moz-transform: scale(3);
-webkit-transform: scale(3);
opacity: 0;
}
I forked your fiddle and altered it, adding the two for comparison: http://jsfiddle.net/madr/Ru8wu/3/
(I also added -moz- since there is no reason not to. -o- or -ms- might also be of interest).