I stumbled across this website that lists CSS button animations. I have linked it --> https://buttonanimations.github.io/ I don't know if its just me but when I try to implement the animations into my website (Copy and paste) they just break. Is it on their end or mine, maybe they didn't input the animations correctly into the website.
(Currently using Safari) (I mean it should work right?)
The animations can be used by clicking on the animation on the page, copying the value:
.button_name:hover{ color: blue; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); animation-duration: 1s; transition-duration: 1s; transition-property: 1s; }
.button_name { width: 300px; height: 45px; background-color: #cccccc; }
and putting the code in a stylesheet or <style> element.
Note that the .button_name selector should be replaced by the class(such as hover_button) that the element has when putting the code in a file or style element:
<button class="hover_button">Test</button>
.hover_button:hover{ color: blue; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); animation-duration: 1s; transition-duration: 1s; transition-property: 1s; }
.hover_button { width: 300px; height: 45px; background-color: #cccccc; }
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hover_button:hover{ color: blue; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); animation-duration: 1s; transition-duration: 1s; transition-property: 1s; }
.hover_button { width: 300px; height: 45px; background-color: #cccccc; }
</style>
</head>
<body>
<button class="hover_button">Test</button>
</body>
</html>
So, you could do that but for me personally, I think the easiest way to do this would be to use the animation attribute in the section. Here is an example:
#popoutbutton {
font-family: 'Nanum Gothic', sans-serif;
border: 3px solid #666;
background-color: black;
cursor: pointer;
color: white;
transition: background-color 300ms ease-out 100ms;
}
#popoutbutton:hover {
background-color: grey;
}
<a
target="popup" onclick="window.open('WEBSITEURLHERE','popup','width=400,height=600'); return false;">
<button id="popoutbutton">Pop Out</button>
</a>
This, at least for me personally, is the easiest way to do this.
Related
I have a CSS animation on 3 boxes (Flexboxes) that transition from off screen to in position using transforms, however whenever I resize the window these boxes space out away from each other and move away from their intended positioning (they should be overlapping). How do I make these boxes stay in place? Or, if that is not possible, how can I remove the transforms to return them back to staying within one row but extending the full width of the screen ?
index.scss
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
.container > div {
width: 30vw;
height: 80vh;
box-sizing: border-box;
border: solid 2px black;
&:nth-child(1) {
animation-name: scrollinRight;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
background: red;
}
&:nth-child(2) {
animation-name: scrollinTop;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
background: rgb(120, 107, 133);
z-index: 2;
}
&:nth-child(3) {
animation-name: scrollinLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
background: green;
}
}
#keyframes scrollinRight {
0% {
transform: translateX(-100vh);
}
100% {
transform: translateX(100vh);
}
}
#keyframes scrollinLeft {
0% {
transform: translate(100vh, 100vh);
}
100% {
transform: translate(-100vh, 10%);
}
}
#keyframes scrollinTop {
0% {
transform: translateY(100vh);
}
100% {
transform: translateY(5%);
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
You could try to use percentage in your keyframes for the translateX
DEMO
#keyframes scrollinRight {
0% {
transform: translateX(-100vh);
}
100% {
transform: translateX(150%);
}
}
#keyframes scrollinLeft {
0% {
transform: translate(100vh, 100vh);
}
100% {
transform: translate(-150%, 10%);
}
}
I've meet a render problem about transform 3D.
On the chrome(PC/Mac), it looks like below.
But on mobile, safari or chrome, I got below.
When I use only the transform 2D, this won't happen on mobile.
code here.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no, minimum-scale=0.5, maximum-scale=0.5">
<meta name="format-detection" content="telephone=no">
<title>MIXER</title>
<style type="text/css">
html,
body {
height: 100%;
margin: 0 auto;
max-width: 750px;
position: relative;
font: 32px/40px sans-serif;
text-align: center;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition: background .5s;
}
* {
box-sizing: border-box;
}
*::-webkit-scrollbar {
display: none;
}
#canvas {
background: #FFF;
padding: 10%;
position: relative;
margin-bottom: 20px;
}
#canvas>div {
position: absolute;
outline: 1px solid transparent;
border: 2px solid #FFF;
}
</style>
<body>
<div id="canvas" style="height: 750px;">
<div id="0" style="width: 200px; height: 200px; line-height: 200px; top: 125px; left: 75px; background: rgb(236, 69, 69); color: rgb(0, 0, 0); font-size: 85px; font-weight: 300; font-family: fantasy; z-index: 100; transform: perspective(500px) rotateX(-10deg) rotateY(-20deg) rotateZ(5deg) scale3d(1, 1, 1) translate3d(20px, 38px, -3px);">1</div>
<div id="1" style="width: 200px; height: 200px; line-height: 200px; top: 125px; left: 275px; background: rgb(48, 46, 62); color: rgb(255, 255, 255); font-size: 104px; font-family: monospace; z-index: 500; transform: perspective(500px) rotateX(-8deg) rotateY(19deg) rotateZ(-9deg) scale3d(1, 1, 1) translate3d(-20px, 4px, 2px);">2</div>
</div>
</body>
</html>
I've tried adjust the z-index, but not work.
And tried adjust the translateZ, but because of the perspective, the cards will look too big or too small.
The result I'm doing is split letters in many cards, like this.
It's random and many, so adjust the translateZ maybe not a good way.
PS: I found a interest thing is, in mobile safari, the surface looks crossed, but if you press the bottom right button, it will start an animation, in that short animate moment, the surface is not crossed.
I think maybe on PC, the browser draw the div one by one, but on mobile, it looks all the 3D elements are in one layer and render once? but how to explain the above situation in safari animation?
Save my poor mobile view.
You should use prefixes in your CSS to make the transform understood well by browsers like template below
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
-webkit-transition: -webkit-transform 1s ease-in;
-moz-transition: -moz-transform 1s ease-in;
-o-transition: -o-transform 1s ease-in;
transition: transform 1s ease-in;
You have then to adapt this sample to your situation.
I have an svg inside a button. it has an initial animation and when you hover it'd has another one that reverse that animation to give you the rotation affect.
There is a painting issue in IE11(also on Edge) as shown in that sample that reproduces that issue.
http://jsbin.com/wuricogope/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button>hi
<svg class="icon">
<rect width="10" height="10" style="fill:blue;stroke:pink;stroke-width:5;">
</svg>
</button>
</body>
</html>
styles
* {
box-sizing: border-box;
}
button {
position: relative;
background: #0066a5;
color: #fff;
padding: 20px;
padding-right: 58px;
box-shadow: none;
transition: box-shadow 0.31s cubic-bezier(0.785, 0.135, 0.15, 0.86);
font-weight: 700;
overflow: hidden;
-webkit-appearance: none;
-moz-appearance: none;
border: 0;
box-shadow: none;
}
#keyframes roll-back-rotate {
49% {
transform: translateY(-44px) rotate(0deg);
}
50% {
transform: translateY(28px) rotate(0deg);
opacity: 0;
}
51% {
opacity: 1;
}
}
#keyframes roll-rotate {
49% {
transform: translateY(28px) rotate(0deg);
}
50% {
opacity: 0;
transform: translateY(-44px) rotate(0deg);
}
51% {
opacity: 1;
}
}
.icon {
position: absolute;
width: 10px;
height: 10px;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
animation: roll .4s forwards;
animation-name: roll-back-rotate;
}
button:hover .icon {
animation-name: roll-rotate;
}
What we did to solve this problem is that we animated top instead of transform:tranlateY()
i made this transform thing, and now i want it to start with being: transform: rotateX(15deg) rotateY(180deg); and then transform to normal(so it is doing it conversely), is that possible and how?
<html>
<head>
<title>Tester</title>
<meta charset="UTF-8">
<style type="text/css" >
div{
border-style: solid;
width: 350px;
height: 400px;
margin-top: 50px;
margin-left: 512px; }
p{
float: left;
font-size: 90px;}
.effect1
{
-moz-transition-duration: 2s;
transform: rotateX(15deg) rotateY(180deg);}
</style>
</head>
<body>
<div>
<p>some text</p>
</div>
<button>Magic</button>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$('button').click(function(){
box = $("div");
box.addClass('effect1');
});
</script>
</body>
Just add the transformations to the basic CSS, then set them to 0 for the effect class.
div{
border-style: solid;
width: 350px;
height: 400px;
transition-duration: 2s;
transform: rotateX(15deg) rotateY(180deg);}
p {
float: left;
font-size: 90px;}
.effect1
{
transition-duration: 2s;
transform: rotateX(0deg) rotateY(0deg);}
jsFiddle Expample
You can also make the button flip the box back and forth by using toggleClass in the jQuery: sample
I am learning CSS transitions and transformations. here is HTML:
<!DOCTYPE html>
<html>
<head>
<title> Transformatons and Transitions</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/n.css">
</head>
<body>
<div class="animate">animate</div>
<div class="animate">animate2</div>
<div class="different">different1</div>
<div class="different">different2</div>
</body>
</html>
and the CSS is:
div.different {
transform: translate(1000px,400px);
border-style: solid;
padding: 25px;
background-color: yellow;
display: block;
width: 125px;
transition:1s ease-in-out;
}
div.different:hover{
background-color: red;
-webkit-transform: rotate(300deg);
}
The rotate is not working properly. instead of just rotating, the element is moving back the original place it was. Instead of staying at (1000px,400px) the element is going back to (0px,0px)
How do I prevent its moving?
You have to use translate on hover too because browser interpret your hover transform as translate(0,0) rotate(300deg):
div.different {
-webkit-transform: translate(1000px, 400px);
-ms-transform: translate(1000px, 400px);
transform: translate(1000px, 400px);
border-style: solid;
padding: 25px;
background-color: yellow;
display: block;
width: 125px;
transition: 1s ease-in-out;
}
div.different:hover {
background-color: red;
-webkit-transform: translate(1000px, 400px) rotate(300deg);
-ms-transform: translate(1000px, 400px) rotate(300deg);
transform: translate(1000px, 400px) rotate(300deg);
}
Define both transformations in the same statement and change them accordingly:
div.different {
transform: rotate(0deg) translate(1000px,400px);
border-style: solid;
padding: 25px;
background-color: yellow;
display: block;
width: 125px;
transition:1s ease-in-out;
}
div.different:hover{
background-color: red;
-webkit-transform: rotate(300deg) translate(1000px,400px);
}
Fiddle: https://jsfiddle.net/quvLtwjt/1/
You were overriding the previous transform.
But, if you want to rotate the div from the current position and not the old position then you need to use transform-origin to redefine the new position and put both transformations in the same statement:
div.different {
transform: rotate(0deg) translate(1000px,400px);
border-style: solid;
padding: 25px;
background-color: yellow;
display: block;
width: 125px;
transition:1s ease-in-out;
transform-origin: 1000px 400px;
}
div.different:hover{
background-color: red;
-webkit-transform: rotate(300deg) translate(1000px,400px);
}
Fiddle: https://jsfiddle.net/quvLtwjt/