This is my CSS code, only the Icon is rotating but the fade animation of that rectangle is not working while hovering that circle.
this is video link Video
This is the image of the code above.
I want to add fade animation to the tooltip and rotation animation to the icon on hovering that button.
#Account-Icon:hover > #user-logo {
animation: settingRole 2s;
}
#Account-Icon:hover > #popup { //can I use #Account-Icon:hover twice??
animation: opacity 2s;
}
#keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
I want to add two actions when hovering over that circle
1.fade animation in the popup(in rectangle)
2.rotation of setting icon
Yes you can run multiple :hover declarations on the same element.
I am guessing that the pop up is not a direct child of the #Account-Icon if it isn't working for you.
#Account-Icon:hover #user-logo {
color: red;
}
#Account-Icon:hover #popup {
color: blue;
}
<div id="Account-Icon">
<div id="user-logo">
logo
</div>
<div id="popup">
pop up
</div>
</div>
Related
I was trying to make a 100% pure css animation, fadein and fadeout when i click on hamburguer menu to reveal the sidebar, (the backdrop should showing opacity like 500 miliseconds) (like jquery fadein) and when i click inside the sidebar to close the menu (the backdrop should hidde the opacity in 2 seconds) (like jquery fadeout)
You can see the version of jquery code here: https://cdpn.io/gilperon/fullpage/ZErBzvY
This is a very simple code, to open menu i put the event on hamburguer icon onclick=' $('#menu-backdrop').fadeIn(500);' and close to close, i put onclick=' $('#menu-backdrop').fadeout(2000);'
If it is not possible to make 100% css pure the animation, since it should be activated by onclick, maybe use just the javascript pure to onclick to add class, and the animation by done via css
I have a lot of ways using height:0 and key frames, but it was not possible to make the animation fadeout, fadein it works.
I make a code that workds to fadein, but to fadeout not working:
Another options are welcome, maybe using visibility, or other ways to show and hidden the animation, display:none usually not works with css animation
#menu-backdrop {
display: none;
animation:fadeOut 5s linear;
}
#menu-backdrop.exibir {
display: block;
animation:fadeIn 0.5s linear;
}
#keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1;
}
}
#keyframes fadeOut {
0% {
opacity:1
}
100% {
opacity:0;
}
}
If anyone can post a work solution should be great, thank you very much guys.
Okay what you need is a transition, and you need to move away from your display property as it will break your animations and transitions since you cannot animate or transition that property in CSS.
A quick example:
const button = document.querySelector( 'button' );
const nav = document.querySelector( 'nav' );
button.addEventListener( 'click', event => {
event.preventDefault();
nav.classList.toggle( 'active' );
});
nav {
position: fixed;
right: 0;
top: 0;
width: 50%;
height: 100%;
background: red;
transition: opacity .4s;
/* This should be set to 0, but to make the point
* of pointer-events clear, I will set it to slightly
* higher so you can see there's no interaction
* with the nav. */
opacity: .1;
pointer-events: none;
}
nav:hover {
/* If you can interact with the navigation,
* you will see it change color. */
background: blue;
}
nav.active {
opacity: 1;
pointer-events: all;
}
nav + button:before {
content: 'Open ';
}
nav.active + button:before {
content: 'Close ';
}
<nav></nav>
<button>Nav</button>
The above shows you that by combining pointer-events: none with opacity you can effectively hide your menu. I added the :hover state for the <nav> to show that you cannot click the <nav> when it is open, and you should therefor consider this element invisible to the user.
Is there any way to make the next code in Safari? Safari doesn't detect the a tag after hover.
.wrap {
width: 100px;
background-color: grey;
height: 100px;
}
.wrap:hover a {
pointer-events: none;
animation: pointerEvent 0s linear forwards .5s;
}
#keyframes pointerEvent {
100% {
pointer-events: auto;
}
}
<div class="wrap">
Demo
</div>
I need to delay the pointer-event because the a tag is inside a div which has a transformation animation on hover. If I do not delay the event, I can click over the a tag before the transformation ends.
The specific problem is in the footer here
I could not solve it only with CSS, I had to give up and add Javascript code
I had the same problem.
My Javascript solution:
4500 = animation-duration + animation-delay = 4.5 secondsYOURCLASS = Classname of the animation-container[0] = first occurrence of YOURCLASS
<script>
document.getElementsByClassName('YOURCLASS')[0].style.pointerEvents='none';
setTimeout(function(){ document.getElementsByClassName('YOURCLASS')[0].style.pointerEvents='YOURCLASS';}, 4500);
</script>
I want to animate my html only with css. A list should fade in, if I add a class ti the element but should immediately disappear, if I remove the class.
I tried several things with transitions in css3. But i seems that all transitions are for both, mount and unmount of an element.
The magic trick is to remove the transition in the basic class an append it in the show class.
$("button").on("click", function(){
$("#container").toggleClass("show")
})
#container {
color: white;
background: #357700;
opacity: 0;
overflow: hidden;
transition: none;
}
#container.show {
opacity: 1;
transition: all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Show/Hide</button>
<div id="container">
<p>Hello World</p>
</div>
I have this hover effect http://codepen.io/anon/pen/dMbEdq but problem is that after animation finishes, the hover disappear. I need that hover to stay. Any suggestion?
<div class="hover15">
<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure>
</div>
Use following Code :
transition-duration: 100s;
Use the following code where ever you want animation to hold or stay for sometime. And if you want it to loop or play # click events kindly refer to KeyFrames.
Use like this :
#keyframes hover {
0% {
// normal styles
}
100% {
// hover styles
}
}
.class {
animation-name: hover;
animation-duration: 1ms;
animation-fill-mode: backwards;
animation-play-state: paused;
}
.class:active,
.class:focus,
.class:hover {
//hover style you define
}
Reference click here to see the effect
I am following this tutorial on how to animate to different views of my app. The animation works fine, but in the demo they do not have a Navbar.
I want to have a Navbar not animate for my app and just animate the ng-view. Right now the Navbar moves out of place and looks glitchy. I thought it was a Z-index problem, but that does not seem to fix it at all.
How can I keep the Navbar from moving when the ng-view is animated?
Index Html
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>
<div class="page [[ pageClass ]]" ng-view></div>
CSS
/* Page Animations */
/* slide in from the bottom */
#keyframes slideOutUp {
to { transform: translateY(-100%); }
}
/* slide in from the right */
#keyframes slideInDown {
from { transform:translateY(-100%); }
to { transform: translateY(0); }
}
/* slide in from the bottom */
#keyframes slideInUp {
from { transform:translateY(100%); }
to { transform: translateY(0); }
}
.ng-enter {
animation: slideInDown .3s both ease-in;
z-index: 7777;
}
.ng-leave {
animation: slideOutUp .3s both ease-in;
z-index: 8888;
}
.top-header {
z-index: 9999;
}
Header Javascript
app.controller('HeaderCtrl', function($scope, $location) {
$scope.pageClass = 'top-header';
$scope.$on('$locationChangeSuccess', function(event, newurl, prevurl) {
$scope.templateUrl = $location.path()==='/signin' ? 'pages/SigninHeader.html' : 'pages/NormalHeader.html' ;
}); });
The solution is simple. You must move the header outside of the container that is animated or alternatively move the animation to the container that you want to animate. The full HTML source code would be helpful.