I am hoping some of you might have some ideas regarding using Bulma Tiles (https://bulma.io/documentation/layout/tiles/). I am partially successful with getting the flip functionality to work using the input checkbox, but the content inside the tile is flipping, not the entire tile.
/* ==========================================
reference --> https://codepen.io/amazingrando/pen/yjbAh
========================================== */
.tile input[type="checkbox"] {
/*Hiding the checkbox. We never want to see it.*/
position: absolute;
left: -9999em;
}
.flip-tile {
cursor: pointer;
/*Animation elements*/
display: block;
perspective: 600px;
position: relative;
transition: all 0.1s;
&:hover {
transform: scale(1.02, 1.02);
}
}
.flip-tile-front, .flip-tile-back{
//position: absolute; top: 0; left: 0;
//width: inherit; height: inherit; /*Size of the card is set by the container*/
backface-visibility: hidden; /*Makes a card invisible from behind.*/
transform-style: preserve-3d;
transition: all 0.4s ease-in-out;
}
.flip-tile-front {
/*Default rotation values*/
transform: rotateX(0deg) rotateY(0deg);
}
.flip-tile-back {
background: MediumPurple;
visibility: hidden;
/*Default rotation value*/
transform: rotateY(-180deg);
}
/*When the container is clicked the checkbox is marked as checked. This activates the CSS below. */
.tile input[type="checkbox"]:checked {
~ .flip-tile {
//animation: lift 0.4s linear;
.flip-tile-back {
visibility: visible;
transform: rotateX(0deg) rotateY(0deg);
}
.flip-tile-front {
transform: rotateY(180deg);
}
}
}
https://codepen.io/lostcook/pen/QWyvBey
Any ideas or help would greatly be appreciated.
Thanks
Related
So I'm making a tic tac toe game right now and I'm trying to add in an animation for a line that shows who won. When the player wins by getting 3 horizontal things then the animation works perfectly but when they win vertically then there's a slight shake on it. Is there any way I can remove this?
Here is the CSS for the line:
#keyframes grow-left {
0% {
width: 0;
}
100% {
width: 1;
}
}
.winLine {
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
}
To view the website and see what I'm talking about it's live on GitHub at this link https://bartycoding.github.io/Tic-tac-toe/
Try creating another div that increases the height instead of using the transform: rotate(90deg);
You could try with transform: scale():
#keyframes grow-left {
0% {
transform: scale(0,1);
}
100% {
transform: scale(1,1);
}
}
I actually fixed this by having the rotation as a global css variable and then changing that variable from javascript so the css looks like this:
#keyframes grow-left {
0% {
transform: rotate(var(--winLineRotation)) scaleX(0);
}
100% {
transform: rotate(var(--winLineRotation)) scaleX(100%);
}
}
.winLine {
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
transform: rotate(var(--winLineRotation));
}
To prevent that little shake at the end of animations, you need to use : backface-visibility:hidden; to the class of the element that you've defined animation for.
#keyframes grow-left {
0% {
width: 0;
}
100% {
width: 1;
}
}
.winLine {
/* Try this */
backface-visibility: hidden;
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
}
I have made a little animation that add a line under the box from the left to the right when it's hovered and the line go back from the left to the right when the mouse isn't hovering the box, but the issue is that the line goes back from the left to the right when I refresh the page. Is there a solution to disable the animation when I open the page or when I refresh it (if possible without JavaScript)
body {
background-color: black;
}
.box {
width: 100px;
height: 100px;
margin: 40px auto;
background-color: #f44336;
position: relative;
}
.box::after {
content: '';
position: absolute;
bottom: -7px;
width: 100%;
height: 3px;
background-color: #fff;
animation: out 400ms linear forwards;
transform-origin: right center;
}
.box:hover::after {
animation: in 400ms linear;
transform-origin: left center;
}
#keyframes in {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#keyframes out {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
<div class="box"></div>
I changed your animation to a transition instead. Is this what you're after?
body {
background-color: black;
}
.box {
width: 100px;
height: 100px;
margin: 40px auto;
background-color: #f44336;
position: relative;
}
.box::after {
content: '';
position: absolute;
bottom: -7px;
width: 100%;
height: 3px;
background-color: #fff;
transform: scaleX(0);
transform-origin: right center;
transition: transform 400ms linear;
}
.box:hover::after {
transform: scaleX(1);
transform-origin: left center;
}
<div class="box"></div>
I don't believe this is possible using only css - you can use a css declaration when a mouse-over ends, however it will always trigger upon load.
You can however use simple JS using classes "on" and "off" to differentiate 'page load' and 'hover off'.
The code in this instance would be:
demo
$(".box").hover(
function () {
$(this).removeClass('off').addClass('on');
},
function () {
$(this).removeClass('on').addClass('off');
}
);
body {
background-color: black;
}
.box {
width: 200px;
height: 200px;
margin: 40px auto;
background-color: #f44336;
position: relative;
}
.box::after {
content: '';
position: absolute;
bottom: -7px;
height: 3px;
background-color: #fff;
}
.box.off::after {
width: 100%;
animation: out 400ms linear forwards;
transform-origin: right center;
}
.box.on::after {
width: 100%;
animation: in 400ms linear;
transform-origin: left center;
}
#keyframes in {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#keyframes out {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
I'm trying to create a menu that is hidden off screen on the top of the document. There is a little portion showing that will be hoverable which will bring the rest of the menu into view. Trying to animate bottom to auto but it isn't working. Was wondering if someone knows how or better way to create a menu off screen similar to my codepen.
http://codepen.io/anthony-dandrea/pen/EjqYqj
.hud is the class that's giving me the animation problem.
.hud {
position: absolute;
width: 100%;
text-align: center;
transition: all 1s;
bottom: calc(100% - 39px);
}
.hud:hover {
bottom: 80%;
bottom: auto;
}
As already mentioned by Patrick Allen in comments, you cannot animate/transition from or to an "auto" value using CSS. For your case, you could replace it with transform: translate() like in the below snippet and achieve the same effect.
Below is the relevant SCSS code and what it does:
The transform: translateY(-100%) moves the elements content upwards by the exact height of the container element. This would hide the whole container.
A top: 39px is added such that the chevron icon is still shown and only the content is hidden.
On hover the transform is nullified by doing transform: translateY(0%). This puts the element back in its original position.
But because of the top: 39px present in the unhovered state, the position of the container would be offset a bit and that can be nullified by adding top: 0px on hover.
.hud {
position: absolute;
width: 100%;
text-align: center;
transition: all 1s;
top: 39px;
transform: translateY(-100%);
&:hover {
top: 0px;
transform: translateY(0%);
}
}
body {
background: #121111;
}
.hud {
position: absolute;
color: red;
width: 100%;
text-align: center;
-webkit-transition: all 1s;
transition: all 1s;
top: 39px;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.hud:hover {
top: 0px;
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
.pull-down {
color: #e6e6e6;
-webkit-transition: all 0.2s;
transition: all 0.2s;
cursor: pointer;
height: 24px;
margin-top: 15px;
font-size: 1.5em;
}
.pull-down:hover {
color: #fff;
}
.hud:hover .pull-down {
color: #fff;
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="hud">
<div class="hud-internal">
<p>foobar</p>
</div>
<i class="fa fa-chevron-down pull-down" data-hud-toggle></i>
</div>
$('#click').click(function () {
var windowHeight = $(window).height();
var lineHeight = $('#line').height();
var desiredBottom = 100;
var newPosition = windowHeight - (lineHeight + desiredBottom);
$('#line').animate({top:newPosition},1000,function () {
$('#line').css({
bottom: desiredBottom,
bottom: 'auto'
});
});
});
Here jsfiddle
Give top: 0; to .hud element and it will work fine. Here is the codepen: http://codepen.io/anon/pen/KpOKdE
I've got a problem with "nested" backface-visibility.
I would like to have a flipping div, with content on both sides. For that, I use two div flipping, each one representing a face of my "two-faces" div (.face and .back).
The rotation works well.
Now, I want to hide their container, and reveal it when the page is loaded with another flip. But as you can see, my .face div is visible.
How could I avoid .face to be visible before my animation?
Here's the shorten working example I could made (Chrome favor):
.flip {
position: relative;
backface-visibility: hidden;
transform: rotateX(180deg);
animation: init 1s ease 2s 1 normal forwards;
}
.flip div {
backface-visibility: hidden;
transition: 1s;
margin: 0;
padding: 20px;
border: 1px solid;
width: 200px;
text-align: center;
}
.back {
position: absolute;
top: 0;
left: 0;
}
.face,
.flip:hover .back {
transform: rotateX(0deg);
}
.flip:hover .face,
.back {
transform: rotateX(180deg);
}
#keyframes init {
from { transform: rotateX(180deg); }
to { transform: rotateX(0deg); }
}
<div class="flip">
<div class="face">FACE</div>
<div class="back">BACK</div>
</div>
If you want it to work in a nested way, you need the property
transform-style: preserve-3d;
in he parent:
.flip {
position: relative;
backface-visibility: hidden;
transform: rotateX(180deg);
transform-style: preserve-3d;
animation: init 1s ease 2s 1 normal forwards;
}
.flip div {
backface-visibility: hidden;
transition: 1s;
margin: 0;
padding: 20px;
border: 1px solid;
width: 200px;
text-align: center;
}
.back {
position: absolute;
top: 0;
left: 0;
}
.face,
.flip:hover .back {
transform: rotateX(0deg);
}
.flip:hover .face,
.back {
transform: rotateX(180deg);
}
#keyframes init {
from { transform: rotateX(180deg); }
to { transform: rotateX(0deg); }
}
<div class="flip">
<div class="face">FACE</div>
<div class="back">BACK</div>
</div>
Im trying to animate a button up to the center of it's parent element on hover using translateY and CSS3 animations, this seems to work fine (although any advice improvements would be great) but the problem is as soon as I hover off the button doesn't reverse the animation instead just resetting back to -50px. Was wondering how I can achieve this?
CSS (Using SCSS + Compass)
#include keyframe(slideIn) {
0%{
//opacity:0;
-webkit-transform:translateY(-50px);
}
60%{
//opacity:1;
//-webkit-transform:translateY(-195px);
}
80%{
-webkit-transform:translateY(-188px);
}
100%{
-webkit-transform:translateY(-175px);
}
}
.box {
width: 300px;
height: 300px;
background: navy;
position: relative;
-webkit-transform: translate3d(0, 0, 0);
overflow: hidden;
&:hover {
.btn {
#include animation(slideIn .45s ease-in-out alternate forwards);
}
}
}
.btn {
width: 50px;
height: 50px;
position: absolute;
bottom: -50px;
}
Codepen - http://codepen.io/styler/pen/fpFlL
You can define 3 css classes:
.box{
//base css here
}
.box.out{
animation-name: out;
animation-duration:.45s;
}
.box.over{
animation-name: in;
animation-duration:.45s;
}
#keyframe in {
//your keyframe animation here
}
#keyframe out {
//reverse animation here
}
Then some javascript to detect hovers:
$(".box").hover(
function () {
$(this).removeClass('out').addClass('over');
},
function () {
$(this).removeClass('over').addClass('out');
}
);
You should put the css animation on the button and not on the hover.
.box {
width: 300px;
height: 300px;
background: navy;
position: relative;
-webkit-transform: translate3d(0, 0, 0);
&:hover {
.btn {
bottom: 150px;
}
}
}
.btn {
width: 50px;
height: 50px;
position: absolute;
bottom: -50px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
http://codepen.io/anon/pen/qGxBh