I use -webkit-animation to make and icon in a menu spin when hovered. If it's clicked a drop down menu appears with blurry text. It's not until I move the cursor off the icon that the text goes back to normal. Now this is odd to me because the animation is causing the blur in a separate element and I don't get why.
So I have something like this.
<li class="drop">
<a href="#" class="drop-toggle">
<span class="nav-icon settings"></span>
</a>
<div class="drop-menu">
<ul role="menu">
....my list with text
I then make icon spin like so.
.nav-icon {
position: relative;
display: block;
width: 32px;
height: 32px;
background-image: url("images/menu-sprite.png");
}
.nav-icon.settings {
background-position: 0 0;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
#-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
.nav-icon.settings:hover {
-webkit-animation: spin 2.7s infinite linear;
-moz-animation: spin 2.7s infinite linear;
-o-animation: spin 2.7s infinite linear;
-ms-animation: spin 2.7s infinite linear;
}
And for whatever reason that makes the text blurry on hover. I tested in IE and Mozilla and it works fine so only in Chrome.
Try adding this css to the blurry text (I'm assuming it is the ul element in your example). If your list contains an anchor make sure you target that. Otherwise just the li should be fine.
So either...
.drop-menu ul li {
-webkit-transform: translateZ(0px);
}
or...
.drop-menu ul li a {
-webkit-transform: translateZ(0px);
}
I had a similar problem and I finally fixed with a selector selecting the text and applying:
li p {transform:none}
hope this helps!
Related
I've been stuck on this problem for 3 days and have scoured the Internet for a solution, but haven't been able to find one that works yet.
I have an animation of a cartoon rocket flying across a screen. The rocket has 4 chained keyframe animations applied to it:
1.) "launch" moves the rocket from off the left side of the screen, across to the right
2.) "rightself" rotates the rocket so it's pointing up
3.) "descend" moves the rocket down towards a planet
4.) "shrink" makes the rocket smaller as it approaches the planet's surface
I can't add a video here, but here are links to how it should and shouldn't look:
How it should look:
https://twitter.com/planet_katie/status/1415739110505996291
How it's glitching on all iOS browsers and desktop Safari:
https://twitter.com/planet_katie/status/1418312787906998275
Game Link, if you want to try yourself: http://www.codeeverydamnday.com/projects/rocketblaster/index.html
The rocket animation runs smoothly on desktop Chrome and Firefox, but glitches in Safari. It also runs smoothly on Android phones, but again glitches on every browser I've tried on an iPhone. The iPhone emulator in Chrome's dev tools shows it running smoothly as well, so I'm not sure why it's not translating to the iPhone itself.
Things I have tried:
Changing my svg images to png's, as I read that sometimes svg's behave unexpectedly
Added all of the proper -webkit- prefixes
Condensing the 4 animations into 1
Using the longhand format when adding my CSS animation on my element (animation-name, animation-duration, animation-iteration-count, etc) instead of the shorthand format
Including both the 0% and 100% keyframes for each animation
Adding a 0.01 second delay to the first animation (read somewhere that this helped someone else)
So far, no luck. Anyone able to take a look at my code and see if I'm missing anything? Note: I have removed the -moz-, -ms- and -o- prefixes for brevity, but they are in my code as well.
#rocketfire {
background-color: red;
position: absolute;
top: 100px;
left: -320px;
height: 200px;
-webkit-animation: launch 4s ease-in-out 0.01s 1 forwards,
rightself 2s ease-in-out 3.5s 1 forwards,
shrink 3.5s ease-in-out 4s 1 forwards, descend 4s ease-in-out 5s 1 forwards;
animation: launch 4s ease-in-out 1 forwards,
rightself 2s ease-in-out 3.5s 1 forwards,
shrink 3.5s ease-in-out 4s 1 forwards, descend 4s ease-in-out 5s 1 forwards;
}
#-webkit-keyframes launch {
0% {
-webkit-transform: translateX(-0px);
}
100% {
-webkit-transform: translateX(1050px);
}
}
#keyframes launch {
0% {
transform: translateX(-320px);
}
100% {
transform: translateX(1050px);
}
}
#-webkit-keyframes rightself {
0% {
-webkit-transform: translateX(1050px) rotate(0deg);
}
100% {
-webkit-transform: translateX(1050px) rotate(-82deg);
}
}
#keyframes rightself {
100% {
transform: translateX(1050px) rotate(-82deg);
}
}
#-webkit-keyframes descend {
0% {
-webkit-top: 0px;
}
100% {
-webkit-top: 270px;
}
}
#keyframes descend {
100% {
top: 270px;
}
}
#-webkit-keyframes shrink {
0% {
-webkit-transform: translateX(1050px) rotate(-82deg) scale(1);
}
100% {
-webkit-transform: translateX(1050px) rotate(-82deg) scale(0.5);
}
}
#keyframes shrink {
100% {
transform: translateX(1050px) rotate(-82deg) scale(0.5);
}
}
<img id="rocketfire" src="images/rocketfireright.png" />
I think you shouldn’t need the -webkit versions of the animations, so removing those will make the CSS easier to debug. I found a couple of inconsistencies and missing values. Cleaned up, the CSS looks like the following:
#rocketfire {
background-color: red;
position: absolute;
top: 100px;
left: -320px;
height: 200px;
animation: launch 4s ease-in-out 1 forwards,
rightself 2s ease-in-out 3.5s 1 forwards,
shrink 3.5s ease-in-out 4s 1 forwards,
descend 4s ease-in-out 5s 1 forwards;
}
#keyframes launch {
0% {
transform: translateX(-320px);
}
100% {
transform: translateX(1050px);
}
}
#keyframes rightself {
0% {
transform: translateX(1050px) rotate(0deg);
}
100% {
transform: translateX(1050px) rotate(-82deg);
}
}
#keyframes descend {
0% {
top: 0px;
}
100% {
top: 270px;
}
}
#keyframes shrink {
0% {
transform: translateX(1050px) rotate(-82deg) scale(1);
}
100% {
transform: translateX(1050px) rotate(-82deg) scale(0.5);
}
}
Try that and see if it fixes it!
What ultimately worked for me was combining the four animations into one, like this:
#keyframes launch {
30% {transform: translateX(1050px) rotate(0);}
50% {transform: translateX(1050px) scale(1) rotate(-82deg); top: 100px;}
80% {transform: translateX(1050px) scale(0.5) rotate(-82deg);}
100% {transform: translateX(1050px) scale(0.5) rotate(-82deg); top: 270px;}
}
Seems like Safari had a problem trying to run multiple keyframes animations at once.
EDIT: So, for some reason, the effect did not work/apply when running it locally. But, it works fine when I deployed it to GH pages. Does anyone know why this is?
I have text laid out in a circle that I want to rotate about itself. On plain HTML/CSS/Javascript, it works just fine and I get the desired result. Also, when I tried it out separately on this Codepen it works as well.
However, when I try to run this on the .rotating-circle div every style gets applied except for the animation. Not sure if this is relevant but I am using the CircleType js library to create this circular text.
import React, {useEffect, useRef} from 'react'
import CircleType from 'circletype'
function RotatingCircle() {
const rotatingCircle = useRef();
useEffect(()=> {
new CircleType(rotatingCircle.current).radius(100)
}, [])
return (
<div className="rotating-circle">
<p className="circle" id="rounded-text" ref={rotatingCircle}>
AND THE WORLD KEEPS GOING AROUND AND AROUND AND AROUND
</p>
</div>
)
}
export default RotatingCircle
Here is the SCSS:
.some-class{
.rotating-circle{
font-size: 1rem;
z-index: -999;
font-weight: bold;
color:$secondary;
display: block;
// background: #000;
max-width: 100%;
max-height: 300px;
// border-radius: 50%;
margin-top: -250px;
-webkit-animation: spin1 30s infinite linear;
-moz-animation: spin1 30s infinite linear;
-o-animation: spin1 30s infinite linear;
-ms-animation: spin1 30s infinite linear;
animation: spin1 30s infinite linear;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 80%;
}
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
#-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
#-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
#-keyframes spin1 {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
Also, just wanted to add that the .some-class class is applied to an element that this component is nested in.
I'm trying to spin the a pseudo element, however, while the animation works perfectly on other elements, the pseudo element doesn't move.
HTML:
<div class="spinning">
some content
</div>
CSS:
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
.spinning::before {
content: 'x';
animation: spin 2s infinite linear;
}
jsfiddle: https://jsfiddle.net/7x0tasnh/
Applying the animation rule to the div works, with ::before it doesn't work. What am I missing?
Add display: inline-block to your :before
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
.spinning::before {
content: 'x';
animation: spin 2s infinite linear;
display: inline-block;
}
<div class="spinning"></div>
I have an element
<a class="fa fa-user icon" href="#"></a>
My requirement is to have a pulsing effect whenever the mouse is on top of it.
My CSS is something like this.
.icon:hover{
-webkit-animation: pulse 2s ease-in;
-moz-animation: pulse 2s ease-in;
animation: pulse 2s ease-in;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#keyframes pulse {
0% {
-webkit-transform: scale(1);
opacity: 0.0;
}
25% {
-webkit-transform: scale(1.35);
opacity: 0.1;
}
50% {
-webkit-transform: scale(1.7);
opacity: 0.3;
}
75% {
-webkit-transform: scale(2.05);
opacity: 0.5;
}
100% {
-webkit-transform: scale(2.4);
opacity: 0.0;
}
}
The effect works fine but the thing is the original icon disappears. I want the original icon to remain visible while the pulsating effect is happening to make it stand out while the person is holding the mouse on top of it.
Do I need to overlay the original div with a new icon?
JSFiddle is available: https://jsfiddle.net/3bu8fxnp/9/
Updated Fiddle
You can add a second icon in the after pseudo element.
.fa-user:after {
content: "\f007";
display: block;
}
.fa-user:before {
position: absolute;
}
You need to change the selector with the transition as well to only affect one of the pseudo elements.
.icon:hover:before {
...
}
I would like to know how to make a div play a CSS animation while hovering over it, and how to make it play the animation backwards when the mouse stops hovering over it. I already have my animation, generated with a handy online CSS keyframes animation generator program.
.element-animation{
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 0% 0%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
}
#-webkit-keyframes animationFrames {
0% {
left:0px;
top:0px;
opacity:1;
-webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ;
}
20% {
-webkit-transform: rotate(60deg) ;
}
40% {
-webkit-transform: rotate(40deg) ;
}
60% {
-webkit-transform: rotate(54deg) ;
}
80% {
-webkit-transform: rotate(42deg) ;
}
100% {
left:0px;
top:0px;
opacity:1;
-webkit-transform: rotate(46deg) scaleX(1) scaleY(1) ;
}
}
All help greatly appreciated!
Add :hover to css class like this element-animation:hover
Check fiddle http://jsfiddle.net/PawelK/SF4Zy/3/ tested with Chrome
To trigger the CSS animation on the hover event, you will need to add an event listener via JavaScript.
document.querySelector('#div1').addEventListener('mouseenter', function(){
this.classList.add('element-animation');
});
Or, if you are using jQuery:
$('#div1').on('mouseenter', function(){
$(this).addClass('element-animation');
});
fiddle