I have the following: http://jsfiddle.net/yHPTv/2491/
I was wondering why the transition isn't working? What it's supposed to do is slide in the hidden element (which can be of variable width) to the right edge of the .block element, however, it just pops in.
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
left: 100%;
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
left: auto;
right: 0;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
I think it has something to do with left: auto because if I change it left: 50%, it works, but not in the way I need it to.
Thanks.
As you say you can't animate from % to auto. But to get the desire effect you can also use transform property. Try this:
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: 0;
transform:translateX(100%);
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
transform:translateX(0)
}
Check the Demo Fiddle
Consider transitioning on right, from -100% to 0:
.block {
position: relative;
width: 500px;
height: 150px; /* shortened to fit in the "Run" window */
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: -100%;
transition: 1s;
}
.block:hover .hidden {
right: 0;
transition: 1s;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
For transition to work, you have to define the property you wish to change in both element states.
In your example it doesn't work because there is no common property between '.hidden' and ':hover' (you set the 'left' property in '.hidden', and 'right' property in ':hover')
If you instead use something like:
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: -100%;
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
right: 0%;
}
It will work because we defined the 'right' property in both states ('.hidden' and ':hover')
Related
I am trying to animate a small rectangular div that is centered/fixed at the top of the screen and will scale from the center into a full screen overlay. Here is a wireframe of the animation I am trying to create.
I have a solution now but it is definitely not the most clean or elegant:
<div class="step1"></div>
.step1 {
border:none;
background:none;
text-align: Center;
font-size: 1.6em;
height: 200px;
width: 300px;
background-color: blue;
position: fixed;
left: 47%;
margin-left: -1.75em;
top: 0;
z-index: 1;
transition: all .2s;
}
.step2 {
height: 100%;
width: 100%;
left: 0%;
top: 0;
margin: 0;
border:none;
background:none;
color: white;
text-align: Center;
background-color: blue;
position: fixed;
z-index: 1;
border-radius: 0;
}
I am also getting a janky animation and I know there must be a better way. Can anyone offer a cleaner solution?
You can .toggleClass() on .click():
$('div').click(function() {
$(this).toggleClass('step');
});
div {
width: 300px;
height: 200px;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%); /* makes it horizontally centered */
background: blue;
transition: all .3s linear; /* added linear transition effect, it's "ease" by default */
}
.step {
width: 100vw; /* 100% of the viewport width */
height: 100vh; /* 100% of the viewport height */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
I'd suggest using css animations like so
.step1 {
border:none;
background:none;
text-align: Center;
font-size: 1.6em;
height: 200px;
width: 300px;
background-color: blue;
position: fixed;
left: 47%;
margin-left: -1.75em;
top: 0;
z-index: 1;
transition: all .2s;
animation-name:demo;
animation-duration:2s;
animation-fill-mode:forwards;
}
#keyframes demo{
0%{height:200px;width:300px;left:47%;margin-left:-1,75em}
100%{height:100%;width:100%;left:0;margin-left:0}
}
<div class="step1"></div>
Here's my approach. You trigger the animation by hovering over the div. I decided to use transition because It's more practical for simple applications like this.
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
background-color: #ff0000;
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0px;
left: 50%;
transition: width 10s, height 10s, left 10s;
}
div:hover {
width: 100%;
height: 100%;
left: 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Check the following demo:
$(document).ready(() => {
setTimeout(() => {
$('#myDiv').toggleClass('step1 step2');
},1000);
});
#myDiv {
position: fixed;
top: 0;
background-color: blue;
transition: all .2s;
}
.step1 {
left: 35%;
right: 35%;
height: 100px;
}
.step2 {
left: 0;
right: 0;
height: auto;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" class="step1"></div>
Here is an easy solution:
body {
margin: 0;
height: 100vh;
}
div {
width: 300px;
margin: auto;
height: 200px;
background: blue;
animation: animate 3s linear 1s forwards;
}
#keyframes animate {
to {
width: 100%;
height: 100%;
}
}
<div></div>
I have some skill bars on my page like this:
And I am using the following CSS to do the animation.
.progress {
height: 10px;
background: #333;
border-radius: 0;
box-shadow: none;
margin-bottom: 30px;
overflow: visible;
}
.progress .progress-bar {
position: relative;
-webkit-animation: animate-positive 2s;
animation: animate-positive 2s;
}
.progress .progress-bar:after {
content: "";
display: inline-block;
width: 9px;
background: #fff;
position: absolute;
top: -10px;
bottom: -10px;
right: -1px;
z-index: 1;
transform: rotate(35deg);
}
.progress .progress-value {
display: block;
font-size: 16px;
font-weight: 600;
color: #333;
position: absolute;
top: -30px;
right: -25px;
}
#-webkit-keyframes animate-positive {
0% {
width: 0;
}
}
#keyframes animate-positive {
0% {
width: 0;
}
}
<div class="progress">
<div class="progress-bar" style="width:60%; background:linear-gradient(to bottom right, #a1c4fd, #c2e9fb);">
<div class="progress-value">60%</div>
</div>
</div>
How to make them stay at 0% until I scroll to this part? I know the scrollTo function in jQuery but I don't know how to apply to this one.
You can use wowjs alongwith animate.css! It's simple and you can apply effects on any element when it enters the viewport. It also gives you options to manipulate animation delay, animation duration and more.
Here are the links:
WowJS:
http://mynameismatthieu.com/WOW/
AnimateCSS
https://daneden.github.io/animate.css/
I have tiles which expand on hover event but they are partly covered by adjacent tiles, how can i fix this?
css code snippet:
.tile {
position: absolute;
width: 86px;
background-color: #000000;
height: 86px;
color: #fff;
transition: 1s linear all;
overflow: hidden;
}
.tile:hover {
background-color: #333333;
height: 172px;
width: 172px;
}
here is a link to my fiddle: https://jsfiddle.net/zjcfope1/
Add z-index to the tile class. Check out this updated fiddle
.tile {
position: absolute;
width: 86px;
background-color: #000000;
height: 86px;
color: #fff;
transition: 1s linear all;
overflow: hidden;
z-index: -9999;
}
.tile:hover {
background-color: #333333;
height: 172px;
width: 172px;
z-index: 9999;
}
is this is you want just try this.
.tile:hover {
background-color: #333333;
height: 172px;`
width: 172px;
z-index:1000;
}
I would like to have a double hover effect but I do not get it.
I would like to avoid the transition by leaving the appeared icon.
Maybe I get some help here. Any suggestion is welcome.
Here is my HTML:
http://jsfiddle.net/CB5Lr/
<div class="block image addMore" style="position: absolute; top: 100px; left: 50px; height: 350px;width:200px;background-color:red;">
<span data-action="fullView" class="shopIcons full_screen_icon"></span>
<figure class="with-hidden-caption">
please hover here. after a second a icon will apear in the right corner.
<br><br>
If you hover the icon it will change. Until here everything is OK.<br><br>
But, if you leave the icon, it shout show the old one without the rolling effekt.
</figure>
</div>
and the css:
.shopIcons {
background: url("http://www.dasunddas.de/img/base/shop_icons.png?v=63") no-repeat scroll 0 0 transparent;
}
span.full_screen_icon {
background-position: 0px 0px;
cursor: pointer;
opacity: 0;
height: 45px;
position: absolute;
right: -45px;
top: -45px;
width: 45px;
z-index: 10;
transition-duration: .6s;
transition-delay: 1s;
/* transition: all; */
}
span.full_screen_icon:hover {
background-position: 0px -50px;
transition-delay: 0s;
transition-duration: 0s;
}
div.addMore:hover span.full_screen_icon {
opacity: 1;
right: 0;
top: 0;
}
http://jsfiddle.net/CB5Lr/
Well, my first idea, use :after (or another element inside the span) because somehow you need to add another element to play with the hover > hover:
http://jsfiddle.net/CB5Lr/7/
.shopIcons {
background: url("http://www.dasunddas.de/img/base/shop_icons.png?v=63") no-repeat scroll 0 0 transparent;
}
span.full_screen_icon {
background-position: 0px 0px;
cursor: pointer;
opacity: 0;
height: 45px;
position: absolute;
right: -45px;
top: -45px;
width: 45px;
z-index: 10;
transition-duration: .6s;
transition-delay: 1s;
}
span.full_screen_icon:after {
content: "";
display: none;
width: 45px;
height: 45px;
position: absolute;
top: 0;
left: 0;
background: url("http://www.dasunddas.de/img/base/shop_icons.png?v=63") no-repeat scroll 0 -50px transparent;
}
span.full_screen_icon:hover:after {
display: block;
}
div.addMore:hover span.full_screen_icon {
opacity:1;
right: 0;
top: 0;
}
This is tricky!
I'm trying create a simple animation that when a user hovers over an element, another element contained within it fills its parent. Currently, I have a JSFiddle that does just that.
BUT, I want to finish this with a few other features that I'm not sure I can actually do in CSS3.
I'm trying to find a way to, upon having the inner circle COMPLETELY fill its parent, (ie when its width/height = 300px), I'd like the fill to pause and not disappear after the animation is complete.
When a user moves their mouse outside the :hover range, I would like the animation to reverse direction as opposed to abruptly stopping.
I've gotten this far with CSS3 but am not sure I can implement these 2 features without resorting to Javascript. Does anyone know of a way of doing this entirely in CSS3/does anyone know if it is possible to do these last two features in CSS3, because I can't seem to find anything.
.circle {
width: 300px;
height: 300px;
background-color: white;
border: 1px solid #000000;
overflow: hidden;
border-radius: 150px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
}
.filler {
width: 0px;
height: 0px;
background-color: red;
border: none;
position: relative;
left: 50%;
top: 50%;
border-radius: 150px;
-mox-border-radius: 150px;
-webkit-border-radius: 150px;
animation: empty 1s;
}
.circle:hover .filler {
animation: fill 2s;
-moz-animation: fill 2s;
-webkit-animation: fill 2s;
background-color: blue;
}
#keyframes fill
{
from {background: red; height: 0px; width: 0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
#-moz-keyframes fill /* Firefox */
{
from {background: red; height: 0px; width: 0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
#-webkit-keyframes fill /* Safari and Chrome */
{
from {background: red; height:0px; width:0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
#keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
#-moz-keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
#-webkit-keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
JS Fiddle
You don't need keyframes for this simple animation. Here is CSS you need:
.circle {
position: relative;
width: 300px;
height: 300px;
background-color: white;
border: 1px solid #000000;
border-radius: 150px;
overflow: hidden;
}
.filter {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: red;
border-radius: 0px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.circle:hover .filter {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 150px;
background-color: blue;
}
and HTML:
<div class="circle">
<div class="filter"></div>
</div>
Here is an example: http://jsbin.com/agekef/1/edit
I hope you can try out for this link might help you out
<http://jsfiddle.net/spacebeers/sELKu/3/>
<http://jsfiddle.net/SZqkb/1/>
<http://css-tricks.com/examples/DifferentTransitionsOnOff/>
Thanks