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.
Related
I'd like to implement a "funny" Navigation into my website, with perspective and stuff, but, as a beginner, I look at a brick-wall.
I just don't find a way to get the line backface-visibility: hidden; working.
My goal is:
Front:
Back:
The result with the code below is (in rotation-state):
There are plenty of working sample-codes on CodePen, and I tried to figure it out without success. Weird things happened, but never did the backface-visibility of an object get its hidden-state.
I used a great template to work on (designmodo.com) and trimmed it down to this:
HTML
<body>
<div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
</body>
CSS
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin:-156px 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform:translateZ(10px);
backface-visibility:hidden;
}
.layer-2 {
transform:rotateY(180deg);
}
Please see my pen: https://codepen.io/herrbraun/pen/JKroYa
(the rotation is there only to show the not-working blackface-visibility –– once it works, it'll be interactive)
If somebody could have an eye on what I've got so far, I don't see any typos or syntax-errors, but – what makes the CSS "fail"?
First of all, you have a syntax error:
.layer-1, layer-2 {
should be
.layer-1, .layer-2 {
Also, for this setup to work, you need to set
.poster {
transform-style: preserve-3D;
}
because you have transforms both in the parent and the child, and you want get the backface style to the combination of both. You had already this on body, but this property doesn't inherit.
Your snippet corrected
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
#keyframes rotating {
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
.poster {
animation: rotating 10s linear infinite;
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin: 0 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
transform-style: preserve-3D; /* new */
}
.poster .shine {
position:absolute;
top:0;
left:0;
background:-webkit-linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
background:linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
z-index:100;
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform: translateZ(10px);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: .1s;
transition: .1s;
}
.layer-1 {background-color: blue; color:white;}
.layer-2 {
background-color: red;
transform:rotateY(180deg);
}
<div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
Try setting the animation to .layer-1 and .layer-2 instead of .poster and set the animation-delay of .layer-2 to -5s
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.
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 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'm learning about CSS3 transitions and struggling with the vendor prefixes. This is just for fun but I'd like to know why the circle expands on hover in Firefox as it's meant to but shrinks in Safari and Chrome. Webkit seems to be ignoring the width and height but border and opacity are fine. The animation in the normal state seems fine too.
I tried changing the .disc:hover width, and tried changing the transition to width instead of all (which seems to work).. it's just all that seems to not be working.
A link to the page:
http://ambigraph.com/sketchbook/expando/
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Expando</title>
<link href="expando.css" rel="stylesheet" type="text/css">
</head>
<body ontouchstart="">
<div class="disc">
</div>
</body>
</html>
The CSS:
#keyframes expando {
0% {
width:50px;
height:50px;
color:#009;
}
100% {
width:30px;
height:30px;
color:black;
}
}
#-webkit-keyframes expando {
0% {
width:50px;
height:50px;
color:#009;
}
100% {
width:30px;
height:30px;
color:black;
}
}
body {
margin: 0 auto;
}
.disc {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius:300px;
width:50px;
height:50px;
border:50px double;
opacity:1;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation:expando .5s ease infinite alternate;
animation:expando .5s ease infinite alternate;
}
.disc:hover {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor:pointer;
border:2px double;
opacity:0;
width:300px;
height:300px;
}
It looks like it may be an animation bug since the expando animation is still applied to the element even while hovered. Each browser deals with it differently.
Clearing the animation seems to fix it.
CSS
.disc:hover {
/* ... */
-webkit-animation:none;
animation:none;
}
Firstly you have to differentiate between transition and animation.
The keyframe animation defines the activity that is going on regardless of your input (hover or whatever).
The transition defines what happens when you do something.
To examine the differences between the two states to see what is being transitioned. Remove the duplicates.
.disc {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius:300px;
width:50px;
height:50px;
border:50px double;
opacity:1;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation:expando .5s ease infinite alternate;
animation:expando .5s ease infinite alternate;
}
.disc:hover {
cursor:pointer;
border:2px double;
opacity:0;
width:300px;
height:300px;
}
Essentially, the hover makes the element transparent while increasing the size and changing the border. Since it's transparent, the border really doesn't matter.