http://codepen.io/DerekDev/pen/PwBadq
If you hover over a menu item on hover effect, you'll notice that after the hover animation returns to its original state after it's over (the text goes back to where it was). I would like the text to stay where it is until you un-hover from the menu.
CSS:
.menu a {
color:#505050;
position:relative;
text-decoration:none;
margin-left:5px;
margin-right:5px;
transition:1s;
padding-left:20px;
padding-right:20px;
padding-top:26px;
padding-bottom:25px;
transition:1s;
}
#-webkit-keyframes menu {
from {top:0;}
to {top:10px;}
}
.menu a:hover {
background-color:#e03333;
color:#ffffff;
-webkit-animation-name:menu;
-webkit-animation-duration:300ms;
-webkit-animation-iteration-count:1;
}
You'll likely have to implement a jQuery solution. See below...
$(document).ready(function(){
$('.menu').on('mouseenter',function(){
$(this).animate({'backgroundColor':'#e03333',
'color':'#ffffff'},200,'linear');
});
});
use animation-fill-mode:forwards
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
however using :hover doesn't work because once the mouse out, it returns to the previous state which doesn't contains :hover css. So it's better to use javascript to add a class name when mouse over, so when mouse out, it still retains the mouse over state.
You can use 2 animations, one lasting 3 seconds, the other 9999 seconds . It won't last forever, but almost ...
.menu a {
color:#505050;
position:relative;
text-decoration:none;
margin-left:5px;
margin-right:5px;
transition:1s;
padding-left:20px;
padding-right:20px;
padding-top:26px;
padding-bottom:25px;
transition:1s;
}
#-webkit-keyframes menu {
0% {top:0;}
10%, 100% {top:10px;}
}
#-webkit-keyframes menu2 {
0% {top:10px;}
100% {top:10px;}
}
.menu a:hover {
background-color:#e03333;
color:#ffffff;
-webkit-animation-name:menu, menu2;
-webkit-animation-duration:3s, 9999s;
-webkit-animation-delay: 0s, 1s;
-webkit-animation-iteration-count:1;
}
<div class=menu><a>test</a></div>
you may set different transition timing on both states:
a {
transition:1.5s;
}
a:hover {
background:tomato;
transition:0.3s
}
<nav>no where nowhere now here</nav>
Related
I'm currently using this tumblr theme and I'm hopeless with code. I've been trying to do it on my own with no avail.
I want to take away the hover effects on the tags, as well as change the color to a darker grey so it's not so hard to view.
I'd also like to be able to see my tags at all times, rather than only when clicking on the posts.
How would I go about doing that?
pastebin(.)com/hcGEQDM6
if you only want to get rid of the hover effect on all of you tags you should remove the style of your page that has :hover on your CSS.
Codes with :hover:
a:hover {
color:{color:hover};
}
#sidebar:hover #sidebarimage img{
border-radius:0px;
margin-left:-100px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
}
#sidebar:hover .desc{
margin-top:-2px;
opacity:1;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}
.links a:hover {
text-align:center;
color:{color:sblink};
background:white;
-moz-transition-duration:0.9s;
-webkit-transition-duration:0.9s;
-o-transition-duration:0.9s;
text-decoration:none;
}
#sidebar:hover .links{
margin-left:54px;
opacity:1;
-moz-transition-duration:0.9s;
-webkit-transition-duration:0.9s;
-o-transition-duration:0.9s;
}
#pagi a:hover{
color:{color:hover};}
#info a:hover {
text-align:center;
color:{color:hover} ;
-moz-transition-duration:.8s;
-webkit-transition-duration:.8s;
-o-transition-duration:.8s;
}
#tags a:hover {
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
color:{color:Hover};
}
.audiop:hover{
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}
#postnotes li:hover {
color:{color:hover};
}
#postnotes li:hover a {
color:{color:hover};
}
#credit a:hover { color: {color:linkhover};}
I try to animate a pseudo element width css3. Everything is ok. But on Firefox (43.0.3) at the end of the animation the font flickers:
div {
width:500px;
height:500px;
color:red;
font-size:100px;
background:black;
transform:matrix(1.0001,0.00,0.00,1.0001,0,0);
}
div:before {
content:"test";
font-size:100px;
color:white;
margin:0 0 0 200px;
display:block;
animation:test 2s ease-in-out 1s both;
transform:matrix(1.0001,0.00,0.00,1.0001,0,0);
}
#keyframes test {
0% {
transform:matrix(1.0001,0.00,0.00,1.0001,0,0);
}
50% {
transform:matrix(1.50,0.00,0.00,1.50,0,0);
}
100% {
transform:matrix(1.0001,0.00,0.00,1.0001,0,0);
}
}
<div></div>
[Edit] I didnt get the point how to link to jsfiddle. so heres the link:
jsfiddle.net SLASH focgzeye
Anyone could help?
Try to add line-height same as font-size:
line-height:100px;
Tested on Firefox 43.0.1 but with the same flicker problem.
Here the jsfiddle update.
My site's menu changes to an off-canvas menu when the screen width is < 768px. The menu can then be triggered by a click, and it translates in and out using a CSS transition.
The problem is when a browser is > 768px, then gets resized to < 768px. The menu quickly transitions out instead of initially being off-canvas.
You can see an example here: http://codepen.io/anon/pen/RPoQzO (Code below)
Make the preview section really wide, and you'll see the white box fill the width
Resize the section narrow and you'll see it slide out. I don't want that - I just want it to be instantly gone.
Clicking on the green area, you'll see the desired transition effect.
(This is, of course a bastardized representation, but it exemplifies the problem)
I want to solve this (if possible) with just CSS. I don't want to add a Javascript listener for resizing. I'd rather have the effect continue, than use Javascript.
Edit: Here's the code:
<div id="menu">
This is the menu
</div>
And the CSS
body{
background:green;
}
#menu{
background:white;
}
#media(max-width:768px){
#menu{
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
transition:transform 0.3s;
-webkit-transition:-webkit-transform 0.3s;
}
#menu.in{
transform:translateX(0);
-webkit-transform:translateX(0);
}
}
You can try to achieve this with one more helper class that would set a transition:
#menu {
background:white;
}
#media (max-width: 768px) {
#menu {
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
}
#menu.clicked {
transition: transform 0.3s;
-webkit-transition:-webkit-transform 0.3s;
}
#menu.in {
transform:translateX(0);
-webkit-transform:translateX(0);
}
}
and JS part:
$(window).on('click',function() {
$("#menu").toggleClass('in').addClass('clicked');
setTimeout(function() {
$("#menu").removeClass('clicked');
}, 100);
});
Note, that you need to remove helper class after some short timeout, so that the transition is only active in case of click, but not when window is resized.
Demo: http://codepen.io/anon/pen/aOBYYP
Moving transition:-webkit-transform 0.3s; transition:transform 0.3s; from inside the media query to the standard #menu seems to work, as shown:
From this:
#menu{
background:white;
}
#media(max-width:768px){
#menu{
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
transition:transform 0.3s;
-webkit-transition:-webkit-transform 0.3s;
}
#menu.in{
transform:translateX(0);
-webkit-transform:translateX(0);
}
}
To this:
#menu{
background:white;
transition:transform 0.3s;
-webkit-transition:-webkit-transform 0.3s;
}
#media(max-width:768px){
#menu{
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
}
#menu.in{
transform:translateX(0);
-webkit-transform:translateX(0);
}
}
This is because there is no transition property applied when the screen is wider than 768px; so it will suddenly jump instead of smoothly changing.
Now that I understand the question more clearly, you could try this:
<style>
body{
background:green;
}
#menu{
background:white;
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
}
.out{
transform:translateX(0%)!important;
-webkit- transform:translateX(-0%)!important;
}
#media(max-width:768px)
{
#menu{
transition:transform 0.3s;
-webkit-transition:-webkit-transform 0.3s;
}
}
#media(min-width:786px)
{
#menu{
transform:translateX(0%);
-webkit- transform:translateX(-0%);
}
}
</style>
<body onclick=" if(window.outerWidth < 786){document.querySelector('#menu') .classList.toggle('out');}">
<div id="menu">
This is the menu
</div>
</body>
This method doesn't use any event listeners, and providing it's not inside a frame (where the outerWidth is not it's width), it seems to work.
i am trying to achieve a pretty simple effect ( I thought ). When a user clicks on a button, I need to slide in a div from the right side of a 'viewport' onto the viewable page.
at the moment I have the 'slide' div's css to look like this:
.slider {
postion: absolute;
right: -200;
display: none
}
Once a user clicks on a button, the div needs to show, and then move to the left, i.e.
transform: translate(-200px, 0);
At the end of the animation the end state of that div would need to be something like this
.slider.after-animate {
postion: absolute;
right: 0;
display: block;
}
then when the user 'closes' the div, I want to slide it back to right: -200px and then after the animation is done, I want to put a display:none on that div.
I have looked an several ngAnimate tutorials but nothing I could find deals with the 'before/after' animate scenario where I need to show\hide the div before/after it gets animated.
can anyone point me to the right direction ????
Thanks!
You could try css keyframes so that we have more than 2 states. In this example, there are 3 states for each animation.
.slider
{
position:absolute;
right:0px;
width:200px;
height:200px;
border:1px solid red;
background-color:red;
}
//angular animate automatically adds ng-hide-add when starting to add ng-hide class
.slider.ng-hide-add{
-webkit-animation: remove_sequence 2s linear ;
animation:remove_sequence 2s linear;
display:block!important;
}
//angular animate automatically adds ng-hide-add when starting to remove ng-hide class
.slider.ng-hide-remove{
-webkit-animation: enter_sequence 2s linear ;
animation:enter_sequence 2s linear;
display:block!important;
}
#-webkit-keyframes enter_sequence {
0% { display:block;
right:-200px;
}
10% { right:-200px; }
100% {right:0px;}
}
#keyframes enter_sequence {
0% { display:block;
right:-200px;
}
10% { right:-200px; }
100% {right:0px;}
}
#-webkit-keyframes remove_sequence {
0% { right:0px; }
90% { right:-200px; }
100% {
right:-200px;
display:none;
}
}
#keyframes remove_sequence {
0% { right:0px; }
90% { right:-200px; }
100% {
right:-200px;
display:none;
}
}
DEMO
I am trying to make css3 slider when i set -moz- prefix for image sliding slider even not work in chrome let alone Mozilla Firefox. but =webkit- prefix is working good in Chrome if i do not use -moz prefix with -webkit. even i declare caption animation. Caption animation is not working.
just have look on my code : http://codepen.io/faeshaan/pen/pefwq
After adding in the keyframe definitions and css properties for mozilla (basically what #Ilan Biala said re: css markup) the animation still didn't work for me on OSX Firefox v22.
Adding an initial:
left: 0px;
Made the animation start working. Seems firefox didn't like animating left unless it was first explicitly defined in the css class.
I found a few issues looking at you code:
syntax for keyframes should be #keframes slide{} not #keyframes 'slide' {}
the slide animation was missing a closing }
added an initial left:0; position to .container ul as dc5 suggested
added a specific height of 200px to .container to make the heading animation look a little cleaner.
This will work as is in Firefox v22, but you will still need to add browser prefixes for full support.
Working Example
.container {
width:200px;
height:200px;
margin:0px auto;
overflow:hidden;
}
.container ul {
width:1000px;
list-style:none;
position:relative;
left:0;
animation: slide 20s infinite;
}
ul, li {
padding:0px;
margin:0px;
}
.container ul li {
position:relative;
left:0px;
float:left;
}
.container h5 {
background:rgba(0, 0, 0, 0.5);
position:absolute;
bottom:4px;
width:100%;
padding:5px;
color:#fff;
text-align:center;
margin-bottom:0px;
animation: headings 4s infinite;
}
#keyframes slide {
10% {
left:0px;
}
15%, 30% {
left:-200px;
}
35%, 50% {
left:-400px;
}
55%, 70% {
left:-600px;
}
75%, 90% {
left:-800px;
}
}
#keyframes headings {
10% {
margin-bottom:4px;
}
25%, 50% {
margin-bottom:-150px;
}
}
I rearranged your code to put the keyframe animation definitions below the properties that are using them. Also, you only had the -webkit-animation: ; declaration, so I added the other declarations for mozilla, microsoft, opera, and W3C compliant browsers.
I also combined the animation-iteration-count: ; into the animation: ; declaration because it saves a little text in the file.
So now instead of what you had before:
.container h5 {
background:rgba(0,0,0,0.5);
position:absolute;
bottom:4px;
width:100%;
padding:5px;
color:#fff;
text-align:center;
margin-bottom:0px;
-webkit-animation: headings 20s;
}
#-webkit-keyframes headings {
10% {
margin-bottom:4px;
}
15%,30% {
margin-bottom:-200px;
}
}
It looks like this:
.container h5 {
background:rgba(0,0,0,0.5);
position:absolute;
bottom:4px;
width:100%;
padding:5px;
color:#fff;
text-align:center;
margin-bottom:0px;
-webkit-animation: headings 20s;
-moz-animation: headings 20s;
-ms-animation: headings 20s;
-o-animation: headings 20s;
animation: headings 20s;
}
And I added the corresponding keyframe definitions.
The final pen is here.