Can an animating element detect the actual mouse pointer position and add a hover state this way?
In the below example, there is a simple div moving left and right, if you hover over the div it will become black, however when you leave your mouse pointer in the path of the animating element, without moving it, the hover state won't be applied.
div{
width: 100px;
height: 100px;
background: red;
animation: move 1s infinite alternate;
}
div:hover {
background: black;
}
#keyframes move{
0%{ transform: translateX(0); }
100%{ transform: translateX(100px); }
}
<div></div>
The other way around works the same, when you actually hover the div and don't move your mouse, the div will remain black even if the mouse pointer is not actually hovering this element anymore.
So, is it possible to keep switching normal to hover state based on the static position of the mouse pointer?
it's not possible to do this with translate, because it has a static position. Like isherwood wrote, the translated element will always exist in its original location.
You could do this with absolute positioning, where u really move the element.
div{
width: 100px;
height: 100px;
background: red;
animation: move 1s infinite alternate;
position: absolute;
}
div:hover {
background: black;
}
#keyframes move{
0%{ left: 0; }
100%{ left: 100px; }
}
<div></div>
Related
I am trying to make a loading animation. I am using css transition to transition into the loading by scaling and then using animation to scale out the x axis. But when I try to transition back to the original state it doesn't use the transition anymore it just snaps back. I could use animation for the whole thing but I want to account for the page continuing to load so I don't want to have to write extra javascript logic to handle it. It would be nice if It would just transition on its own.
When you click the following snippet the first time it works fine. But when you click it again it just snaps back to its original state and doesn't use the transition. If you use a different property like opacity in the animation part then it works fine so I'm assuming there is something with the browser not recognizing the current scaled value. Is this a bug or am I doing something wrong?
document.querySelector('.wrapper').addEventListener('click', () => {
document.querySelector('.wrapper').classList.toggle('loading')
})
.wrapper{
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper > div{
color: white;
display:flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: blue;
transition: transform 500ms ease-out;
transform: scale(1);
}
.wrapper.loading > div{
transform: scale(0.2, 0.002);
animation: loading 1000ms ease-out infinite;
animation-delay: 500ms;
}
#keyframes loading {
0%{
transform: scale(0.2, 0.002)
}
50%{
transform: scale(0.5, 0.002)
}
100%{
transform: scale(0.2, 0.002)
}
}
<div class="wrapper">
<div>click me</div>
</div>
TL;DR
I believe that this happens because CSS transition eventually gives a class two states and transitions between them, when you remove your class you don't change its state, you remove it. my solution would be to add another class to set it back.
CSS transitions work by defining two states for the object using CSS. In your case, you define how the object looks when it has the class "loading" and you define how it looks when it doesn't have the class "saved" (it's normal look). When you remove the class "loading", it will transition to the other state according to the transition settings in place for the object without the "loading" class.
If the CSS transition settings apply to the object (without the "loading" class), then they will apply to both transitions.
your transition CSS settings only apply to .saved and thus when you remove it, there are no controls to specify a CSS setting. You may want to add another class ".fade" that you leave on the object all the time and you can specify your CSS transition settings on that class so they are always in effect.
I don't know a pure css fix for this.
But you can add a different class with a animation that restores to what it was before with JS
const wrapper = document.querySelector(".wrapper");
wrapper.onclick = () => {
if ([...wrapper.classList].includes("loading")) {
wrapper.classList.add("restore");
} else {
wrapper.classList.remove("restore");
}
wrapper.classList.toggle("loading");
};
.wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper>div {
color: white;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: blue;
animation: none;
transform: scale(1);
transition: transform 500ms ease-out;
}
.wrapper.restore>div {
animation: restore 500ms ease-out;
}
.wrapper.loading>div {
transform: scale(0.2, 0.002);
animation: loading 1000ms 500ms ease-out infinite;
}
#keyframes restore {
0% {
transform: scale(0.2, 0.002);
}
100% {
transform: scale(1);
}
}
#keyframes loading {
0% {
transform: scale(0.2, 0.002)
}
50% {
transform: scale(0.5, 0.002)
}
100% {
transform: scale(0.2, 0.002)
}
}
<div class="wrapper">
<div>click me</div>
</div>
You can use animation iteration count property:
div {
animation-iteration-count: 2;
}
or use fill mode to freeze the animation at the end:
-webkit-animation-fill-mode: forwards;
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%; }
Why does border-radius not work when background is not applied onto the animation.
The border radius only works when a background is applied at 0%-50%-100%. Without the background color the border-radius doesn't work.
I expect the border-radius to change from a square to a circle and then back to a square.
.square {
/* Set up the normal state */
display: block;
width:350px;
height:350px;
margin: 200px auto;
background:#41A9F0;
/* apply the animation */
animation: box 5s linear infinite;
}
#keyframes box {
0% {
transform: rotate(0) scale(0.2);
/* background: #41A9F0; */
border-radius: 0%;
}
50% {
transform: rotate(180deg) scale(2);
/* background: #5ABE8A; */
border-radius: 50%;
}
100% {
transform: rotate(360deg) scale(0.2);
/* background: #41A9F0; */
border-radius: 0%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shape Animation Challenge</title>
</head>
<body>
<!-- HINTS
1) Open shape-animation-ANSWER.html in your browser and try to create the final product.
2) Create a keyframe named box.
3) There are three points to this animation, starts off as a square, then a circle (background color for the circle is #5ABE8A), then back to a square.
Hint: You will need the properties border-radius and transform -->
<div class="square"></div>
</body>
</html>
Without any background color you can't see the animation but it still persist.
Here an example with your animation applied also to a div without background color but with border (to see what happen)
https://jsfiddle.net/cjohm3xb/1/
.square-border {
border:1px solid red;
/* apply the animation */
animation: box 8s linear infinite;
}
I have tested your code in Chrome 75.0.3770.142 and Edge 44.17763.1.0. You have provided a coloured div, so you can see the animation. Try to remove the background and add a child, which can be a text or something else, then you'll see the same effect. If you remove background and all the children, obviously you "will see" an empty animated div, which translates to nothing on screen actually!
I tried playing with keyframes, backgrounds and border radiuses. The page seems to work correctly. Check this stylesheet:
.square {
/* Set up the normal state */
display: block;
width:350px;
height:350px;
margin: 200px auto;
/* apply the animation */
background: #41A9F0;
animation: box 5s linear infinite;
}
#keyframes box {
0% {
transform: rotate(0) scale(0.2);
background: #41A9F0;
border-radius: 0%;
}
10% {
background: green;
border-radius: 50%;
}
25% {
background: blue;
border-radius: 10%;
}
50% {
background: red;
transform: rotate(180deg) scale(2);
border-radius: 30%;
}
100% {
transform: rotate(360deg) scale(0.2);
background: yellow;
border-radius: 0%;
}
}
Remember that percentage values for border radius go from 0 to 50. Anything above 50 is simply 50.
Source: https://www.codecademy.com/forum_questions/559fe347e39efe4cf40005a9
I you can provide the browser you are using or explain the problem better at least, community could have provided better answers.
I've been trying to teach myself some css animations with keyframes, and I'm trying to create something in which a small square drops down, then out of that square, a rentangle protrudes from the left, it then displays some text after 8 or so seconds and then the rentangle retreats back into the smaller square (to the right) and the smaller square retreats upwards into 'thin air'. If you're wondering what this is for it's an alert notification when someones follows me on Twitch TV while I livestream. Here is a JSFiddle of my efforts so far. For some reason on JSFiddle the content doesn't appear before the animation, however on the the alert service i use it does happen. I've linked their tester here, so you can see what I mean.
HTML CODE:
<html>
<head>
<title>GR412 Twitch Follower Alert</title>
<link href="Twitch\followeralert.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="follower-container">
<div class="left-square-container">
</div>
<div class="right-retangle-container">
<div class="header">
<span class='keyword name'>{name}</span> is now following you!
</div>
</div>
</div>
</body>
</html>
CSS CODE:
#keyframes slideInFromAbove {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
#keyframes slideInFromTheLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
#keyframes slideInFromBelow {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
#keyframes slideInFromTheRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.follower-container {
display: flex;
font-family: 'Roboto';
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.left-square-container {
width: 75px;
height: 75px;
background: #313131;
animation: 1s 1s 1 slideInFromAbove;
}
.right-retangle-container {
width: 500px;
height: 75px;
background: #212121;
animation: 1s 2s 1 slideInFromTheLeft;
}
.header {
font-size: 24px;
color: #ffffff;
text-align: center; /*vertical alignment of text*/
position: relative; /*horizontal alignment of text*/
top: 50%; /*horizontal alignment of text*/
transform: translateY(-50%); /*horizontal alignment of text*/
margin: 10px,
10px,
10px,
10px; /*GOT TO HERE, THIS COULD BE CAUSING TWITCHING*/
}
.keyword:not(.user_message) {
color: #0d47a1;
}
However there are some issues, first being that the content appears first, then does the animation. I would like it so you start with an empty screen and then the animation ensures that the square drops down first, then the rentangle protrudes from the square and finally the text is displayed. These three components should hold for 8 seconds then as already described another animation should hide each component in the order specified in the first paragraph.
The second issue is that when the rentangle protrudes, it doesn't do it from the right hand edge of the square, rather it does it from the left. So it overlaps the square, which ruins the effect.
I've based my code off this exsisting question:css3 transition animation on load?, which has helped a lot, but it doesn't help with my specifc needs.
Any help would be appreicated, and if something isn't clear let me know.
Note, if the second link doesn't work, let me know and i'll sort it.
Thanks, GR412.
Issue 1: You need to set the styles of the initial placement for the content.
Issue 2: position: relative; z-index: /*some value*/ So you can properly layer the content.
You also need to use animation-fill-mode: forwards
This sets the end styles to the end styles of #keyframes associate with it.
I've tweaked your timing. Here's a plnkr of it. Read the comments in the CSS
You end up having to calculate percentages. I would consider working out a calculation that can accept variables for scss/less/sass etc.
CSS comments:
/*
to calculate these percentages:
([seconds of portion of animation] x 100)/[total seconds of animation]
1) slideInFromAbove starts
2) slideInFromTheLeft starts
3) slideInFromTheLeft ends
4) slideInFromAbove ends
slideInFromAbove:
1) slide down
2) hold
2) slide up
slideInFromTheLeft:
1) slide right
2) hold
3) slide left
*/
I'm trying to animate a span that moves back and forth enclosed within a div using CSS3 keyframes. Ideally, I'd like the keyframes to look something like this:
#-webkit-keyframes backandforth {
0% {text-align:left;} 50%{text-align:right;} 100%{text-align:left;}
}
Demo in JSFiddle
But since it's not possible to animate text-align, I've been searching for an alternative property that can be animated to reach the desired positioning. That's where I'm stuck at.
I tried setting the left property to 100% midway through the animation, but that ended up pushing the span off the div. I also tried animating the float property, but that didn't work.
Then I saw this question on moving text from left to right and tried the JSFiddle from the top answer. While it looks like the solution, it unfortunately did not work for me since I want my animation to move continuously at ease, and for the last few seconds of that animation, the span stalls.
CSS Solution
you can play around the left position when the animation is at 50% like so :
because when you put it left: 100% it depend on the left corner of the span this is why it will go out the container div
#-webkit-keyframes backandforth {0%{left:0;} 50%{left:58%;} 100%{left:0;}}
Live Demo
I hope this fits your needs
JavaScript solution
var thisis = document.getElementById("wrapper");
var tyty = document.getElementById("move");
var witth = tyty.offsetWidth;
thisis.style.paddingRight = witth +"px";
Live Demo
with this JS whatever you change the text it will still in the container div
There is also a pure-CSS way to do it if you combine absolute positioning left with simultaneous transform: translate.
https://jsfiddle.net/cd7kjwy6/
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
.mt-2 {
margin-top: 0.5rem;
}
/* ---------------- relevant CSS ---------------- */
.animated {
position: relative;
background-color: pink;
max-width: 200px;
overflow: hidden;
line-height: 3rem;
height: 3rem;
}
.animated__text {
position: absolute;
animation: 3s bounce ease-in-out infinite paused;
white-space: nowrap;
top: 0;
padding: 0 0.5rem;
}
.animated:not(.animated--on-hover) .animated__text,
.animated.animated--on-hover:hover .animated__text {
animation-play-state: running;
}
#keyframes bounce {
0%, 5%, 95%, 100% {
left: 0%;
transform: translate(0, 0);
}
45%, 55% {
left: 100%;
transform: translate(-100%, 0);
}
}
<div class="animated">
<span class="animated__text">animate me!</span>
</div>
<div class="animated mt-2">
<span class="animated__text">Longcat is looooooooooooooooooong!</span>
</div>
<div class="animated mt-2">
<span class="animated__text">~</span>
</div>
<div class="animated animated--on-hover mt-2">
<span class="animated__text">only on hover</span>
</div>
If you wanted to snap the "hover" variant back to the original position, you could use something like this (or JavaScript for a proper reset):
.animated.animated--on-hover:not(:hover) .animated__text {
left: 0 !important;
transform: translate(0, 0) !important;
}