I'm currently trying to develop a small browser-based game. I've been fiddling around quite a bit with getting an animation to work the way I want it to.
The problem is that it works alright in Opera, quite well in Edge (although it crops the circle a bit). However, as always, IE fails quite a bit.
The example doesn't show the function perfectly, even though it normally works in my browser (Opera).
The card should flip from its absolute position, expand to 90% height AND move to complete center of the screen. There will be more cards with absolute positions and therefore it would be ideal to only have one "move" animation to center.
Thank you
$(document).ready(function() {
$(document).on("click", ".card", function() {
$(this).addClass("flipover");
$(this).removeClass('hover');
});
//if (window.document.documentMode) { alert("Use another browser!"); }
});
html,
body {
perspective: 1000px;
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.card {
position: absolute;
width: 10vh;
height: 10vh;
border-radius: 50%;
perspective: 1000px;
transform-style: preserve-3d;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.cardfront,
.cardback {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
border-radius: 50%;
}
.cardfront {
transform: rotateY(0deg);
background: red;
}
.cardback {
transform: rotateY(180deg);
background: blue;
}
.hover:hover {
transform: rotate3d(1, 1, 0, 45deg);
transition: all 0.3s ease-in-out 0s;
}
.flipover {
position: absolute !important;
height: 90vh;
width: 90vh;
top: 50%;
left: 50%;
transform: rotateY(180deg);
margin-left: -45vh;
margin-top: -45vh;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.pos1r {
top: 50%;
margin-top: -5vh;
left: 50vh;
}
.pos2r {
top: 35vh;
left: 35vh;
}
.pos3r {
top: 55vh;
left: 35vh;
}
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<div class="card pos1r hover">
<div class="cardfront">
</div>
<div class="cardback">
</div>
</div>
https://jsfiddle.net/dumo6r04/
I'm not sure if this is more or less what you were attempting to do - I applied the transform-origin and used translate3D to help move the card centrally.
$( document ).ready(function() {
$(document).on("click", ".card", function() {
$(this).addClass("flipover");
$(this).removeClass('hover');
});
});
html, body {
perspective: 1000px;
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.card
{
position: absolute;
width: 10vh;
height: 10vh;
border-radius: 50%;
perspective: 1000px;
transform-style: preserve-3d;
transform-origin:center;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.cardfront,
.cardback {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
border-radius: 50%;
transform-origin:center;
}
.cardfront {
transform: rotateY(0deg);
background: red;
}
.cardback {
transform: rotateY(180deg);
background: blue;
}
.hover:hover {
transform: rotate3d(1, 1, 0, 45deg);
transition: all 0.3s ease-in-out 0s;
}
.flipover {
position: absolute !important;
height: 90vh;
width: 90vh;
top: 50%;
left: 50%;
transform: rotateY(180deg) translate3D(-35%,-45%,0);
margin-left: -45vh;
margin-top: -45vh;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.pos1r {
top: 50%;
margin-top: -5vh;
left: 50vh;
}
.pos2r {
top: 35vh;
left: 35vh;
}
.pos3r {
top: 55vh;
left: 35vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card pos1r hover">
<div class="cardfront"></div>
<div class="cardback"></div>
</div>
Related
I have a mobile slide menu. I want users to click on the body to slide back the mobile menu. I also only want the menu button to have position fixed when the menu is slide opened.
I have the following code used from this codepen: https://codepen.io/ellissei/pen/VvgYjB
I changed it a little but to style the menu button and.
<script>
jQuery(function($)
{
$(".hamburger").click(function()
{
$(".navigation").toggleClass("open");
})
$(document).('body', 'click', function(event) {
$('.open').removeClass('open');
})
});
</script>
<html>
<nav class="navigation">
<div class="hamburger ">
<span class="bars"></span>
</div>
<div class="menu-mobile" style="background-image:url(<?php echo get_template_directory_uri(); ?>/img/ecw-bg-graphic-menu%402x-100.jpg);" >
<?php get_search_form(); ?>
<ul class="menu-mobile-hoofdmenu">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'menu clearfix' ) ); ?>
</ul>
<hr>
<ul class="menu-mobile-topmenu">
<?php wp_nav_menu( array( 'theme_location' => 'menu-top-header' ) ); ?>
</ul>
</div>
</nav>
</html>
</pre>
CSS
<pre>
.navigation {
display:none;
}
.hamburger {
position: fixed;
top: 20px;
right: 30px;
cursor: pointer;
z-index: 1000;
background:white;
height: 30px;
border-radius: 30px;
}
.hamburger span {
vertical-align: middle;
transform: scale(0.5);
margin-top: 13px;
}
.hamburger .bars {
display: block;
position: relative;
width: 30px;
height: 3px;
background-color: #14BADF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hamburger .bars:before, .hamburger .bars:after {
position: absolute;
content: " ";
width: 100%;
height: 3px;
background-color: #14BADF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
border-radius: 10px;
}
.hamburger .bars:before {
top: 10px;
}
.hamburger .bars:after {
bottom: 10px;
}
.open .hamburger .bars {
background-color: transparent;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.open .hamburger .bars::before {
top: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #DA4E29;
}
.open .hamburger .bars::after {
bottom: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #DA4E29;
}
.menu-mobile {
width: 70%;
height: 100%;
padding: 75px 0px 0 0;
background-position: center;
background-size: cover;
position: fixed;
right: -100%;
top: 0;
opacity: 0;
z-index: 999;
margin-top: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menu-mobile a {
color: white;
}
.menu-mobile a:hover {
color: white;
}
.open .menu-mobile {
right: 0;
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menu-mobile:hover {
overflow-y: auto;
}
ul.menu-mobile-hoofdmenu, ul.menu-mobile-topmenu {
padding-left: 0%;
}
</pre>
I can not replicate your code in snippet but as code pen code goes:
Replace jQuery code with:
jQuery(function($)
{
$(".hamburger").click(function()
{
$(".navigation").toggleClass("open");
})
$("body").click(function(e)
{
if ($(e.target).hasClass('bars', "hamburger")) {
return false;
}
$(".navigation").removeClass("open");
})
});
This will target body but exclude bars and hamburger...
Also code pen code is missing tags, add them to test it.
Your problem was that hamburger is inside body, and there for removes class open on click.
EDIT:
jQuery(function($)
{
$(".hamburger").click(function()
{
$(".navigation").toggleClass("open");
})
$("article").click(function()
{
$(".navigation").removeClass("open");
})
});
so my background image won't display properly on my Squarespace website mydietgoal(dot)com/legalities
It only holds the black background color I set but nothing more. The code i've tested, when plugged into codepen works perfectly but not when i plug it into my site.
The javascript works perfectly fine on both. But in the CSS area where i plug my image links, they don't appear.
(The rest of the code is repeated for the next 2 div containers, if it could be solved with just the first that'd be great)
Thank you so much,
Chris
Codepen: i.imgur.com/M8Jwoy6.png?1
My site: mydietgoal(dot)com/legalities
<style>
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #1f1f1f;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.cont {
position: relative;
overflow: hidden;
height: 100vh;
padding: 80px 70px;
}
.cont__inner {
position: relative;
height: 100%;
}
.cont__inner:hover .el__bg:after {
opacity: 1;
}
.el {
position: absolute;
left: 0;
top: 0;
width: 19.2%;
height: 100%;
background: #252525;
transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
will-change: transform, width, opacity;
}
.el:not(.s--active) {
cursor: pointer;
}
.el__overflow {
overflow: hidden;
position: relative;
height: 100%;
}
.el__inner {
overflow: hidden;
position: relative;
height: 100%;
transition: transform 1s;
}
.cont.s--inactive .el__inner {
transform: translate3d(0, 100%, 0);
}
.el__bg {
position: relative;
width: calc(100vw - 140px);
height: 100%;
transition: transform 0.6s 0.7s;
will-change: transform;
}
.el__bg:before {
content: "";
position: absolute;
left: 0;
top: -5%;
width: 100%;
height: 110%;
background-size: cover;
background-position: center center;
transition: transform 1s;
transform: translate3d(0, 0, 0) scale(1);
}
.cont.s--inactive .el__bg:before {
transform: translate3d(0, -100%, 0) scale(1.2);
}
.el.s--active .el__bg:before {
transition: transform 0.8s;
}
.el__bg:after {
content: "";
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.5s;
}
.cont.s--el-active .el__bg:after {
transition: opacity 0.5s 1.4s;
opacity: 1 !important;
}
.el__preview-cont {
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: ease-in-out 0.3s;
}
.cont.s--inactive .el__preview-cont {
opacity: 0;
transform: translateY(10px);
}
.cont.s--el-active .el__preview-cont {
opacity: 0;
transform: translateY(30px);
transition: all 0.5s;
}
.el__heading {
color: #ffffff;
text-transform: uppercase;
font-size: 18px;
}
.el__preview-cont:hover {
opacity: 0;
}
.el__content {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 30px;
opacity: 0;
pointer-events: none;
transition: all 0.1s;
}
.el.s--active .el__content {
z-index: 2;
opacity: 1;
pointer-events: auto;
transition: all 0.5s 1.4s;
}
.el__text {
text-transform: uppercase;
font-size: 40px;
color: #fff;
}
.el__close-btn {
z-index: -1;
position: absolute;
right: 10px;
top: 10px;
width: 60px;
height: 60px;
opacity: 0;
pointer-events: none;
transition: all 0s 0.45s;
cursor: pointer;
}
.el.s--active .el__close-btn {
z-index: 5;
opacity: 1;
pointer-events: auto;
transition: all 0s 1.4s;
}
.el__close-btn:before,
.el__close-btn:after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 8px;
margin-top: -4px;
background: #fff;
opacity: 0;
transition: opacity 0s;
}
.el.s--active .el__close-btn:before,
.el.s--active .el__close-btn:after {
opacity: 1;
}
.el__close-btn:before {
transform: rotate(45deg) translateX(100%);
}
.el.s--active .el__close-btn:before {
transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
transform: rotate(45deg) translateX(0);
}
.el__close-btn:after {
transform: rotate(-45deg) translateX(100%);
}
.el.s--active .el__close-btn:after {
transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
transform: rotate(-45deg) translateX(0);
}
.el__index {
overflow: hidden;
position: absolute;
left: 0;
bottom: -80px;
width: 100%;
height: 100%;
min-height: 250px;
text-align: center;
font-size: 4vw;
text-color: #f57200;
line-height: 0.85;
font-weight: bold;
transition: transform 0.5s, opacity 0.3s 1.4s;
transform: translate3d(0, 1vw, 0);
}
.el:hover .el__index {
transform: translate3d(0, 0, 0);
}
.cont.s--el-active .el__index {
transition: transform 0.5s, opacity 0.3s;
opacity: 0;
}
.el__index-front {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.el__index-back,
.el__index-front {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.el__index-back {
color: #2f3840;
opacity: 0;
transition: opacity 0.25s 0.25s;
}
.el:hover .el__index-back {
transition: opacity 0.25s;
opacity: 0;
}
.el__index-overlay {
overflow: hidden;
position: relative;
transform: translate3d(0, 100%, 0);
transition: transform 0.3s 0.1s;
color: transparent;
}
.el__index-overlay:before {
content: attr(data-index);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
color: #f57200;
transform: translate3d(0, -100%, 0);
transition: transform 0.3s 0.1s;
}
.el:hover .el__index-overlay {
transform: translate3d(0, 0, 0);
}
.el:hover .el__index-overlay:before {
transform: translate3d(0, 0, 0);
}
.el:nth-child(1) {
transform: translate3d(0%, 0, 0);
transform-origin: 50% 50%;
}
.cont.s--el-active .el:nth-child(1):not(.s--active) {
transform: scale(0.5) translate3d(0%, 0, 0);
transition: transform 0.95s, opacity 0.95s;
}
.el:nth-child(1) .el__inner {
transition-delay: 0s;
}
.el:nth-child(1) .el__bg {
transform: translate3d(0%, 0, 0);
}
.el:nth-child(1) .el__bg:before {
transition-delay: 0s;
background-image: url("https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59d53a662278e77f4c59a518/1507146344134/background-security-my-diet-goal-privacy-policy-hd.jpg");
}
</style>
I have a <div> that contains a link.
At the bottom right corner of this <div>, I have an overlay element which takes over the whole <div> when hovered.
This overlay element also contains a link.
My problem is that the link in the overlying element is not clickable.
The problem is because I use pointer-events: none; on class .overlay-content, but if I don't use it, both links become dead.
Please see code here:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover~.overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Also, here is fiddle.
Is there any way that I can achieve this?
can't believe I actually found a pure CSS solution without any drawbacks.
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.wrap:hover .amg-corner-button_wrap {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.wrap:hover .amg-corner-button_wrap ~ .overlay-content {
pointer-events: auto;
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class="wrap">
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
</div> <!-- panel body -->
</div> <!-- panel default -->
JSFiddle
Instead of listening to the :hover event on the corner-button, listen to it on a parent element. Since the :hover will be dispatched regardless of the mouse interaction of the elements' children, it is possible to set pointer-events: auto to the children containing links (overlay-content), once the corner-button has been hovered. Now, that the overlay-content is hoverable and since it's a child of the wrapping div, it will cause the :hover to stay active over the whole wrapping div.
I would recommend using JS style swapping instead of CSS pointer events for this problem. You need to trigger one change to your css when you mouse over the bottom corner, and a separate event when you mouse out of the container. I do not believe CSS gives you that kind of conditional control.
Here is half a solution using animations instead of transitions. This works for when you hover on to the amg-corner-button_wrap but not when you move off it. I'm a bit new to animations so hopefully someone here who knows more maybe able to help you with the second half.
There is also a weird visual in here if you hover on the amg-corner-button_wrap and hover off mid transition. The reason for this is that I added a background color to overlay-content so when it's fading in and you mouse off amg-corner-button_wrap the swipe starts to reverse before the fade is complete.
Anyway, hope this 50% solution helps you or others drive this to 100%! Have to run to a meeting, good luck :-)
#keyframes example {
0% {
visibility: hidden;
opacity: 0;
}
1% {
visibility: visible;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 200px;
width: 200px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -120px;
bottom: -120px;
width: 200px;
height: 200px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.overlay-content {
visibility: hidden;
opacity: 0;
background-color: #e8c63d;
bottom: 0;
color: #333;
left: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.overlay-content~.amg-corner-button_wrap,
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.amg-corner-button_wrap:hover~.overlay-content,
.overlay-content:hover {
animation-name: example;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-delay: 0.3s;
animation-fill-mode: both;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Here's a working fiddle for a css and html only change: https://jsfiddle.net/y2auh7gn/4/.
It separates the link from overlay-content and places it where it's supposed to be with position: absolute. We need to move the link out of overlay-content so that when we hover over it the overlay doesn't disappear.
There's a side-effect where the link pops out with the corner piece.
I've implemented click event on .parent_2, but when I click on it, it does not work on iPAD.
Please help.
HTML:
<div class="parent_1">
<div class="parent_2">
<svg></svg>
</div>
</div>
CSS:
.parent_1 {
position: absolute;
top: 16px;
bottom: 0;
z-index: 3;
overflow: hidden;
width: 320px;
border-radius: 0 0 0 3px;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.parent_2 {
position: absolute;
top: 7px;
right: 7px;
z-index: 3;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
}
svg {
position: absolute;
top: 5px;
left: 5px;
display: block;
-webkit-transition: opacity 0.15s ease-in-out;
transition: opacity 0.15s ease-in-out;
pointer-events: none;
}
I have a requirement in which the container is stretching all over the page. when I click on the container, it should become smaller.
This should happen with animation. I tried css transition which is animating the stretched element to top:
shrinking slowly to the provided dimensions while moving towards top-right
but what I want is
Shrink in middle and then move to bottom-right of the page by animating.
Fiddle
CSS
#main {
position: fixed;
height: 100%;
width: 100%;
margin-top: 50px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
margin-top: 50px;
background-color: green;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
How should I do this?
You can try combining both transition and animation. Even you can use only animation here:
#main {
position: fixed;
height: 100%;
width: 100%;
left:0;
top:60px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-25px;
background-color: green;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-animation: to-bottom-right 0.5s 0.5s forwards;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
#-webkit-keyframes to-bottom-right {
100% {
left: 100%;
top: 100%;
margin-left:-100px;
margin-top:-50px;
}
}
Please test the demo using webkit-based browsers, you can add prefixes yourself for other browsers. Note that the animation will run after the transition has been done, so we have to use animation-delay.
Demo.
The demo above uses negative margins to center the div, its advantage is well supported but we have to change the negative margins' values when changing the size of the div. Another way is using translate transform, this will center the div greatly but it requires browsers to support transform feature. Here is the demo using translate instead to center the div Demo 2.
Here is another solution using only animation, the transition is just used for animating the color changing.
Demo 3.
UPDATE: All the demos above work perfectly for browsers supporting animation feature. However it's a pity that IE9 does not support this feature. I've tried using some workaround and I've found a solution by using multi-transition. The first transition lasts for 0.5s while the second transition will start after 0.5s. To animate the div from center to bottom-right corner, you have to use transition for the translate transform. Here is the code it should be:
#main {
position: fixed;
height: 100%;
width: 100%;
left:0;
top:60px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-25px;
background-color: green;
-webkit-transform:translate(50vw , 50vh) translate(-50%,-50%);
-ms-transform:translate(50vw , 50vh) translate(-50%,-50%);
-moz-transform:translate(50vw , 50vh) translate(-50%,-50%);
transform:translate(50vw , 50vh) translate(-50%,-50%);
-webkit-transition: all 0.5s ease, -webkit-transform 0.5s 0.5s ease;
-ms-transition: all 0.5s ease, -ms-transform 0.5s 0.5s ease;
-moz-transition: all 0.5s ease, -moz-transform 0.5s 0.5s ease;
transition: all 0.5s ease, transform 0.5s 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
Updated Demo.
Do you mean like this: fiddle
Here's what I changed:
#main {
position: absolute;
bottom: 0;
right: 0;
height: calc(100% - 100px);
width: 100%;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 50px;
margin-top: 50px;
background-color: green;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
I set the position to absolute and the bottom and right properties to 0. Since the element is not in the document flow any more, I used calc to move set the element 100px smaller than the height.
Well i tried
http://jsfiddle.net/tyuAk/15/
in jquery tho
$("#click").hover(
function() {
setTimeout( '$("#main").delay(500).attr("id","newclass");' ,500 );
});
#main {
position: absolute;
height: 100%;
width: 100%;
background-color: red;
}
#newclass {
position: absolute;
height: 50px;
width: 100px;
margin-top:25%;
background-color: green;
}
#click:hover + #main {
width: 100px;
height: 50px;
margin-top:25%;
background-color: green;
transition-property:width,height,margin;
transition: 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
#click:hover + #newclass {
margin-top:0px;
transition: all 0.5s ease;
}