I'm trying to make it zoom in from center rather than from top-left corner.
I've tried transform: scale(2,2), and transform: translateX(-25%) translateY(-25%), as per here, neither seem to do anything at all.
Is there any alternative to scale? It doesn't seem to be working in Chrome.
Maybe it has something to do with the container that it's in? I'm not sure. I tried changing the top and left coordinates to account for the movement of the center when the animation plays, but that also didn't help.
.box2 {
position: relative;
width: 40em;
height: 20em;
}
.box2 > .content {
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1.0;
margin: 0;
}
.box2.inactive > .content {
opacity: 0;
}
.circle {
position: absolute;
border-radius: 50%;
background: green;
opacity: 1;
}
.circle.circle1 {
top: 4em;
left: 6em;
width: 5em;
height: 5em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.circle.circle2 {
top: 10em;
left: 20em;
width: 3em;
height: 3em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.circle:hover {
width: 10em;
height: 10em;
}
<html>
<div class="box2">
<div class="circle circle1"></div>
</div>
</html>
Looks like this in Microsoft Edge with scale(2,2) and doesn't animate at all in Chrome:
You can set transform: translate(-50%, -50%); for .circle - it shifts the circle left and up relatively to its starting point and thus the point set in the center of circle.
.circle {
position: absolute;
border-radius: 50%;
transform: translate(-50%, -50%);
background: green;
opacity: 1;
}
.circle.circle1 {
top: 8em;
left: 12em;
width: 5em;
height: 5em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.circle:hover {
width: 10em;
height: 10em;
}
<html><div class="circle circle1"></div></html>
Related
Just as a quick overview - I have purchased a theme for WordPress that has custom in-built animations for it's main menu (starts off large and transparent, and then on scroll, it becomes thinner with a solid colour background).
I've been trying for the past few days to simply set the scroll menu as the permanent menu and get rid of the animation, but I'm not having all that much luck with it, so any help would be really appreciated.
Css:
/* 2. Header
===============================================================*/
.wsmenucontainer header.topheader {
background: #222;
}
.wsmenucontainer header.topheader {
left: 0;
padding: 1rem 0 12rem;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.wsmenucontainer header.topheader .header-image {
background: #222;
height: 100%;
left: 0;
opacity: 1;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.wsmenucontainer header.topheader .header-image img {
left: 0;
opacity: 0.5;
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
header.topheader.scroll {
background: #222;
padding: 0;
}
header.topheader.scroll .header-image img {
opacity: 0;
}
.noHeadImage header.topheader {
padding: 1rem 0;
background:transparent;
}
.noHeadImage .header-image {
display:none;
}
.noHeadImage header.topheader.scroll {
background: #222;
padding: 0;
}
main section {
padding: 8rem 0;
}
main section#single-class{
padding: 0;
}
Jordy i help you, can you provide a Theme preview link?
You can either remove or comment transition css. Hope it gelps
.wsmenucontainer header.topheader {
left: 0;
padding: 1rem 0 12rem;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
//comment this area to remove transition
/* transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease; */
}
.wsmenucontainer header.topheader .header-image img {
left: 0;
opacity: 0.5;
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
//comment this area to remove image transition
/* transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease; */
}
To fix it, you can add a custom css in your theme (css custom area) or via plugin (https://it.wordpress.org/plugins/wp-add-custom-css/)
Your custom code:
.wsmenucontainer header.topheader{
transition: none; */
-moz-transition: none;
/* -webkit-transition: none; */
-o-transition: none;
}
Consider the following fiddle code
<div class="my-wrapper">
<input type="text"
placeholder="placeholder." >
<label >Press enter to save</label>
</div>
.my-wrapper {
input {
width: 200px;
height: 3em;
}
input:focus + label{
right: 20px;
opacity: 1;
color: #D3D3D3;
}
label{
line-height: 40px;
position: absolute;
right: 160px;
-moz-transition: 0.3s right ease;
-ms-transition: 0.3s right ease;
-o-transition: 0.3s right ease;
-webkit-transition: 0.3s right ease;
transition: 0.3s right ease;
z-index: 0;
opacity: 0;
}
}
I am seeing the forward transition on focus, I thought on blur the transition would go backwards, but I don't see it, can someone give me a hint on what I did wrong?
You can keep this simple by using transform instead of absolute values
.my-wrapper input {
width: 200px;
height: 3em;
}
.my-wrapper input:focus+label {
transform: translateX(0);
opacity: 1;
color: #D3D3D3;
}
.my-wrapper label {
position: absolute;
right: 10px;
line-height: 40px;
transform: translateX(-20px);
transition: 0.3s all ease;
z-index: 0;
opacity: 0;
}
<div class="my-wrapper">
<input type="text" placeholder="placeholder.">
<label>Press enter to save</label>
</div>
You have given transition: 0.3s right ease which will apply only to right property and not for opacity.
Change the transition property to transition: 0.3s all ease and the effect fades out smoothly on blur.
JsFiddle link
I set the width of two separate divs (circle_bg_l and circle_bg_r) both to 7vh, however one of them appears to be bigger. Here is the code:
#charset "utf-8";
/* CSS Document */
body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
background-image: url(html-bg2.png);
background-size: 0.5%;
background-repeat: repeat;
background-color: #111111;
overflow: auto;
}
#headbar_left {
position: fixed;
left: 0;
margin: 0;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transform-origin: 100% -50%;
-o-transform-origin: 100% -50%;
-moz-transform-origin: 100% -50%;
-webkit-transform-origin: 100% -50%;
-ms-transform-origin: 100% -50%;
}
#headbar_right {
position: fixed;
right: 0;
margin: 0;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-webkit-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
}
#circle_bg_l {
position: fixed;
z-index: 0;
width: 7vh;
height: 10vh;
left: calc(50vw - 7vh);
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
background-color: Transparent;
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}
#circle_bg_r {
position: fixed;
z-index: 0;
width: 7vh;
height: 10vh;
right: calc(50vw - 7vh);
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
background-color: Transparent;
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.show {
background-color: #8704ff !important;
}
#circle_logo {
position: fixed;
z-index: 1;
width: 14vh;
height: 14vh;
border-radius: 7vh;
background-color: #161616;
left: calc(50vw - 7vh);
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
border: 1vh solid #8704ff;
text-align: center;
line-height: 14vh;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
background-image: url(html-logo.png);
background-size: 100%;
}
.l_menu {
height: 10vh;
z-index: 2;
line-height: 10vh;
vertical-align: center;
text-align: center;
color: white;
font-family: "Impact";
font-size: 2.5vh;
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
width: calc((50vw - 7vh) / 3);
float: left;
}
.l_menu:hover {
color: #161616;
background-color: #8704ff;
}
.r_menu {
height: 10vh;
z-index: 2;
line-height: 10vh;
vertical-align: center;
text-align: center;
color: white;
font-family: "Impact";
font-size: 2.5vh;
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
width: calc((50vw - 7vh) / 3);
float: right;
}
.r_menu:hover {
color: #161616;
background-color: #8704ff;
}
.spin {
transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
.collapse {
transform: scaleX(0);
-o-transform: scaleX(0);
-moz-transform: scaleX(0);
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
}
.move_left {
transform: translateX(calc(7vh - 50vw));
-o-transform: translateX(calc(7vh - 50vw));
-moz-transform: translateX(calc(7vh - 50vw));
-webkit-transform: translateX(calc(7vh - 50vw));
-ms-transform: translateX(calc(7vh - 50vw));
}
.move_fast {
transition: all 0.2s ease-in-out !important;
-o-transition: all 0.2s ease-in-out !important;
-moz-transition: all 0.2s ease-in-out !important;
-webkit-transition: all 0.2s ease-in-out !important;
-ms-transition: all 0.2s ease-in-out !important;
}
#circle_logo:hover {
transition: all 0.15s ease-in-out !important;
-o-transition: all 0.15s ease-in-out !important;
-moz-transition: all 0.15s ease-in-out !important;
-webkit-transition: all 0.15s ease-in-out !important;
-ms-transition: all 0.15s ease-in-out !important;
border-radius: 0;
}
#body_content {
position: absolute;
width: calc(100vw - 28vh);
height: 105vh;
margin-right: 14vh;
margin-left: 14vh;
background-color: #161616;
z-index: -1;
box-shadow: 0 3vh 10vh 4vh black;
color: white;
font-family: "Impact";
font-size: 10vh;
padding-top: 21vh;
}
#t_s {
font-size: 2vh;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="uh.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>uh</title>
</head>
<body>
<div id="top"></div>
<div id="headbar_left">
<div class="l_menu">FIRST</div>
<div class="l_menu">SECOND</div>
<div id="l_mid" class="l_menu">THIRD</div>
</div>
<div id="headbar_right">
<div class="r_menu">SIXTH</div>
<div class="r_menu">FIFTH</div>
<div id="r_mid" class="r_menu">FOURTH</div>
</div>
<div id="circle_bg_l"></div><div id="circle_logo"></div><div id="circle_bg_r"></div>
<div id="body_content"><center>WHAT IS THIS PAGE?<p id="t_s">no one knows</center></div>
</body>
<script>
var a = 1;
function remove() {
if (a === 0) {
$("#circle_logo").removeClass('move_left');
setTimeout(function() {
$("#circle_logo").removeClass('move_fast');
$("#circle_logo").removeClass('spin');
$("#headbar_left, #headbar_right").removeClass('collapse');
$("#circle_logo").css("background-image", "url(html-logo.png)");
$("a").attr("href", "uh.html");
}, 300);
a = 1;
}
}
function add() {
if (a === 1) {
$("#circle_logo").addClass('spin');
$("#headbar_left, #headbar_right").addClass('collapse');
setTimeout(function() {
$("#circle_logo").addClass('move_left');
$("#circle_logo").addClass('move_fast');
$("#circle_logo").css("background-image", "url(up-arrow.png)");
$("a").attr("href", "#top");
}, 400);
a = 0;
}
}
$(document).scroll(function() {
if($(window).scrollTop() > 0) {
add();
}
else {
remove();
}
});
$("#l_mid").mouseover(function() {
$("#circle_bg_l").addClass("show");
});
$("#l_mid").mouseout(function() {
$("#circle_bg_l").removeClass("show");
});
$("#r_mid").mouseover(function() {
$("#circle_bg_r").addClass("show");
});
$("#r_mid").mouseout(function() {
$("#circle_bg_r").removeClass("show");
});
</script>
</html>
I also just noticed after running the snippet that the divs do not line up the same way they do when I open the webpage in a browser. Any idea how to fix these problems? Thanks!
They are the same size in firefox, chrome and safari (latest versions on OS X) - according to the snippet you posted. They also appear to my eyes the same size.
That said, your browser or device might be showing some differences, one possibility is your use of VW. You have 2 header portions, each using 51VW next to each other. That's roughly the equivalent of having 2 sections use 51% of the width, and not add to 100vw.
I would try changing those to 50VW each and test again.
Am trying to define css style in which when hover an element the opacity should change from 0 to 1.after a few seconds if unhover doesnt occur opacity should change its value to 0.
.selection:hover .player-icon {
opacity: 1;
transition-duration: 3s;
-moz-transition: opacity .25s ease-in;
-webkit-transition: opacity .25s ease-in;
-o-transition: opacity .25s ease-in;*/
}
.player-icon {
margin-left: 45%;
margin-top: 21%;
z-index: 999;
position: absolute;
width: 55px;
height: 55px;
opacity: 0;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
Use keyframe animation.
#keyframes show-hide {
0% { color: red; }
10% { color: white; }
90% { color: white;}
100% { color: red; }
}
.player-icon {
display: inline-block;
padding: 1em;
color: red;
background-color: red;
}
.player-icon:hover {
animation: show-hide 3s linear;
}
Put your cursor on the red rectangle more than 3 seconds.<br><br>
<div class="player-icon">Play</div>
I was playing with image swap hover effect with CSS3 transitions. Unfortunately, it only works in Chrome. I have seen lots of examples from CSS3 transition that works flawless in Chrome, Firefox and Safari, but not this time... :(
Where is the problem?
http://jsfiddle.net/kYZ9Y/
.logo {
float: left;
z-index: 1;
width: 325px;
height: 73px;
background: url(../img/logo.png) no-repeat;
position: absolute;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logo:hover {
z-index: 2;
opacity: 1;
background: url(../img/logo1.png) no-repeat;
}
Cheers!
just change the ease to ease-in-out like this
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
demo: http://jsfiddle.net/kYZ9Y/4/
for more Easing Functions go to http://easings.net/
the markup :
<div class="logo"></div>
the style :
.logo {
float: left;
z-index: 1;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/1.jpg) no-repeat;
position: absolute;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.logo:hover {
z-index: 2;
opacity: 1;
background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
}
Can be done with pseudo elements.
.logo {
background: url(http://via.placeholder.com/300?text=Normal) no-repeat;
width: 300px;
height: 300px;
position: relative;
}
.logo:after {
content: "";
opacity: 0;
display:block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url(http://via.placeholder.com/300?text=Hover) no-repeat;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logo:hover:after {
opacity: 1;
}
https://jsfiddle.net/84bvybjs/
At least for Firefox, as per the documentation, background-image is not animatable.
Instead, try putting both images one on top of each other and animating the opacity property:
.logo {
float: left;
z-index: 1;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
position: absolute;
}
.logotop {
float: left;
z-index: 2;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/1.jpg) no-repeat;
position: absolute;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logotop:hover {
opacity: 0;
}
HTML:
<div class="logo"></div><div class="logotop"></div>
Fiddle: http://jsfiddle.net/kYZ9Y/2/