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.
Related
Im trying to make divs move up infinity loop, and i'm struggle with the keyframes settings.
Can anyone help me figure out where I'm wrong and correct my mistake, I'm sure it's something so simple I just did not notice it.
Thank you very much.
#container {
color:#999;
text-transform: uppercase;
font-size:60px;
font-weight:bold;
padding-top:200px;
position:fixed;
width:100%;
bottom:45%;
display:block;
}
#flip {
height:100px;
overflow:hidden;
}
#flip > div > div {
color:#fff;
padding:10px 12px 10px 12px;
height:65px;
margin-bottom:45px;
display:inline-block;
}
#flip div:first-child {
animation: show 5s linear infinite;
}
#flip div div {
background:#42c58a;
}
#flip div:first-child div {
background:#4ec7f3;
}
#flip div:last-child div {
background:#DC143C;
}
#keyframes show {
0% {transform: translateY(0);}
50% {transform: translateY(50%);}
100% {transform: translateY(100%);}
}
<div id=container>
ENDLESS
<div id=flip>
<div><div>SMOOTHIES</div></div>
<div><div>MILKSHAKES</div></div>
<div><div>FRUIT SHAKES</div></div>
<div><div>COCTAILS</div></div>
<div><div>FRUIT SHAKES</div></div>
</div>
OPTIONS!
</div>
You're animating the full view port, #flip.
Instead you can wrap all the divs in a container, #filp-container, and animate it.
Here is the full edited code with a comment for each change:
#container {
color:#999;
text-transform: uppercase;
font-size:60px;
font-weight:bold;
padding-top:200px;
position:fixed;
width:100%;
bottom:45%;
display:block;
}
#flip {
height:100px;
overflow:hidden;
}
#flip-container div {
color:#fff;
padding:10px 12px 10px 12px;
height:65px;
margin-bottom:45px;
/* this will break the aliging of divs */
/* display:inline-block; */
}
/* we are targeting the container */
#flip-container {
animation: show 5s linear infinite;
}
#flip div div {
background:#42c58a;
}
#flip div:first-child div {
background:#4ec7f3;
}
#flip div:last-child div {
background:#DC143C;
}
#keyframes show {
0% {transform: translateY(0);}
/* 50% is unnecessay */
/* 50% {transform: translateY(50%);} */
/* to animate to upward use -100% */
100% {transform: translateY(-100%);}
}
<div id=container>
ENDLESS
<div id=flip>
<!-- adding a container around divs and animating it instead of the view port -->
<div id="flip-container">
<!-- removed unnecessary surrounding divs -->
<div>SMOOTHIES</div>
<div>MILKSHAKES</div>
<div>FRUIT SHAKES</div>
<div>COCTAILS</div>
<div>FRUIT SHAKES</div>
</div>
</div>
OPTIONS!
</div>
If I wanted to Change the width of an element twice and animate that. For example:
box{
height:100px;
width:100px;
}
.box:hover{
width:300px;
width:200px;
}
I think you need keyframes animation. It should works properly in your case.
like this
#keyframes box-size {
0%, 100% {
width: 100px;
}
50% {
width: 300px;
}
}
.box{
height:100px;
width:100px;
background: pink;
}
.box:hover{
animation: box-size 2s;
}
<div class="box"></div>
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.
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>
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.