My css is here
#hamburger {
box-sizing: border-box;
display: none;
width: 60px;
height: 50px;
left: 0;
margin: 0;
z-index: 2;
}
#hamburger:before, #hamburger:after, #hamburger span {
background: #fff;
content: '';
display: block;
width: 30px;
height: 3px;
position: absolute;
left: 15px;
}
#hamburger:before {
top: 13px;
}
#hamburger span {
top: 23px;
}
#hamburger:after {
top: 33px;
}
#hamburger:before, #hamburger:after, #hamburger span {
-webkit-transition: none 0.5s ease 0.5s;
transition: none 0.5s ease 0.5s;
-webkit-transition-property: transform, top, bottom, left, opacity;
transition-property: transform, top, bottom, left, opacity;
}
/* Hamburger animation */
html.mm-opening #hamburger:before, html.mm-opening #hamburger:after {
top: 23px;
}
html.mm-opening #hamburger span {
opacity: 0;
}
html.mm-opening #hamburger:before {
transform: rotate(45deg);
}
html.mm-opening #hamburger:after {
transform: rotate(-45deg);
}
<a id="hamburger" class="mm-fixed mm-slideout" href="#menu"><span></span></a>
Here is a link to a working example http://mmenu.frebsite.nl/ test by clicking the hamburger icon - work in every browser except safari
how can i make it work on Safari?
-webkit-transform: rotate(-45deg)
Worked as a solution to the problem. Via #DomlThe-Bread
Related
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>
The pattern has two anchors, one of them rotates and becomes blurred when the sibling has :before underlining animation. Can you please suggest what is a possible solution for the current issue?
.sibling {
position: relative;
margin: 30px;
}
.sibling:hover:before {
visibility: hidden;
transform: scaleX(0);
}
.sibling:before {
content: "";
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
background-color: #000;
visibility: visible;
transform: scaleX(1);
transition: all 0.4s ease-in-out;
}
.rotated {
transform: rotate(-90deg);
margin: 30px;
position: absolute;
}
<a class='sibling'>Sibling</a>
<a class='rotated'>Rotated</a>
Add translate3d(0,0,0) and -webkit-font-smoothing: antialiased; to your rotated text. This should work.
.sibling {
position: relative;
margin: 30px;
}
.sibling:hover:before {
visibility: hidden;
transform: scaleX(0);
}
.sibling:before {
content: "";
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
background-color: #000;
visibility: visible;
transform: scaleX(1);
transition: all 0.4s ease-in-out;
}
.rotated {
transform: rotate(-90deg) translate3d(0,0,0);
margin: 30px;
position: absolute;
-webkit-font-smoothing: antialiased;
}
<a class='sibling'>Sibling</a>
<a class='rotated'>Rotated</a>
I'm trying to get a transition hover effect on border that the border expands on hover.
h1 {
color: #666;
}
h1:after {
position: absolute;
left: 10px;
content: '';
height: 40px;
width: 275px;
border-bottom: solid 3px #019fb6;
transition: left 250ms ease-in-out, right 250ms ease-in-out;
opacity: 0;
}
h1:hover:after {
opacity: 1;
}
<h1>CSS IS AWESOME</h1>
I've tried this on Jsfiddle
To expand the bottom border on hover, you can use transform:scaleX'(); (mdn reference) and transition it from 0 to 1 on the hover state.
Here is an example of what the border hover effect can look like :
The border and transition are set on a pseudo element to prevent transitioning the text and avoid adding markup.
To expand the bottom border from left or right, you can change the transform-origin property to the left or right of the pseudo element:
h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
h1:hover:after { transform: scaleX(1); }
h1.fromRight:after{ transform-origin:100% 50%; }
h1.fromLeft:after{ transform-origin: 0% 50%; }
<h1 class="fromCenter">Expand from center</h1><br/>
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>
Note : You need to add vendor prefixes to maximize browser support (see canIuse).
Expand bottom border on hover with 2 lines
You can achieve this effect when the text spans on 2 lines. The before pseudo element is absolutely positioned to make underline of the first line with bottom:1.2em;:
h1 { position:relative;color: #666;display:inline-block; margin:0;text-transform:uppercase;text-align:center;line-height:1.2em; }
h1:after, h1:before {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
h1:before{
position:absolute;
bottom:1.2em; left:0;
width:100%;
}
.ef2:hover:after {
transition-delay:150ms;
}
h1:hover:after, h1:hover:before { transform: scaleX(1); }
<h1>Expand border<br/>on two lines</h1>
<br/>
<br/>
<h1 class="ef2">Expand border<br/>effect two</h1>
Different transition direction on hover in and out :
The point is to change the transform-origin position from one side to the other on the hover state. This way the bottom boder enters from one side on hover and exits on the other when the element isn't hovered anymore.
Here is a demo :
h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
h1.fromLeft:after{ transform-origin: 100% 50%; }
h1.fromRight:after{ transform-origin: 0% 50%; }
h1.fromLeft:hover:after{ transform: scaleX(1); transform-origin: 0% 50%; }
h1.fromRight:hover:after{ transform: scaleX(1); transform-origin: 100% 50%; }
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>
We can do this with only background. No pseudo-element needed. This is more flexible.
h1 {
/* you can change these variables to control the border */
--border-color: purple;
--border-width: 5px;
--bottom-distance: 0px; /* you can increase this */
color: #666;
display: inline-block;
background-image: linear-gradient(var(--border-color), var(--border-color));
background-size: 0% var(--border-width);
background-repeat: no-repeat;
transition: background-size 0.3s;
margin: 5px 0;
}
.fromCenter {
background-position: 50% calc(100% - var(--bottom-distance));
}
.fromRight {
background-position: 100% calc(100% - var(--bottom-distance));
}
.fromLeft {
background-position: 0 calc(100% - var(--bottom-distance))
}
h1:hover {
background-size: 100% var(--border-width);
}
<h1 class="fromCenter">Expand from center</h1><br/>
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>
Multiple line animation:
h1 {
/* you can change these variables to control the border */
--border-color: purple;
--border-width: 5px;
--bottom-distance: 0px; /* you can increase this */
color: #666;
display: inline; /* should be 'inline' for multiple line animation */
background-image: linear-gradient(var(--border-color), var(--border-color));
background-size: 0% var(--border-width);
background-repeat: no-repeat;
transition: background-size 0.5s;
}
.fromCenter {
background-position: 50% calc(100% - var(--bottom-distance));
}
.fromRight {
background-position: 100% calc(100% - var(--bottom-distance));
}
.fromLeft {
background-position: 0 calc(100% - var(--bottom-distance))
}
h1:hover {
background-size: 100% var(--border-width);
}
<h1 class="fromLeft">Expand from <br>left with <br>multiple line</h1>
simple and lightweight version
li {
margin-bottom: 10px;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
//transition: width .3s;
}
<ul>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
</ul>
I know this is an old post and it is already answered but you might like the following effect too.
<div class="cd-single-point">
<a class="cd-img-replace" href="#0"></a>
</div>
.cd-single-point {
position: absolute;
list-style-type: none;
left: 20px;
top: 20px;
}
.cd-single-point>a {
position: relative;
z-index: 2;
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #0079ff;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-single-point::after {
content: '';
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
top: 0;
left: 0;
animation: cd-pulse 2s infinite;
}
#keyframes cd-pulse
{
0% {box-shadow:0 0 0 0 #0079ff}
100%{box-shadow:0 0 0 20px rgba(255,150,44,0)}
}
DEMO
h1 {
color: #666;
display:inline-block;
margin:0;
text-transform:uppercase;
}
h1:after {
display:block;
content: '';
border-bottom: solid 3px #92a8d1;
transform: scaleX(0);
transition: transform 800ms ease-in-out;
}
h1:hover:after {
transform: scaleX(1);
}
<h1 class="fromCenter">Hover Over Me</h1><br/>
we can do using simple transition effect.
HTML
<h1>CSS IS AWESOME</h1>
CSS
h1 {
color: #666;
position: relative;
display: inline-block;
}
h1:after {
position: absolute;
left: 50%;
content: '';
height: 40px;
height: 5px;
background: #f00;
transition: all 0.5s linear;
width: 0;
bottom: 0;
}
h1:hover:after {
width: 270px;
margin-left: -135px;
}
Link to Fiddle
h1 {
/* you can change these variables to control the border */
--border-color: purple;
--border-width: 5px;
--bottom-distance: 0px; /* you can increase this */
color: #666;
display: inline-block;
background-image: linear-gradient(var(--border-color), var(--border-color));
background-size: 0% var(--border-width);
background-repeat: no-repeat;
transition: background-size 0.3s;
margin: 5px 0;
}
.fromCenter {
background-position: 50% calc(100% - var(--bottom-distance));
}
.fromRight {
background-position: 100% calc(100% - var(--bottom-distance));
}
.fromLeft {
background-position: 0 calc(100% - var(--bottom-distance))
}
h1:hover {
background-size: 100% var(--border-width);
}
<h1 class="fromCenter">Expand from center</h1><br/>
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>
transition: all 1000ms ease-in-out;
Demo
or are you looking for this
Demo2
h1 {
color: #666;
}
h1:after {
position: absolute;
left: 10px;
content: '';
height: 40px;
width: 275px;
border-bottom: solid 3px #019fb6;
transition: all 550ms ease-in-out;
border-bottom-width: 0px;
}
h1:hover:after {
border-bottom-width: 5px;
}
<h1>CSS IS AWESOME</h1>
I would like both to behave like webkit, but for some reason in webkit works as I expected but -moz- does the animation when mouseout the .porftolio item,
Any idea why?
CSS:
.portfolio-item {
float: left;
width: 300px;
height: 300px;
margin: 0.5%;
position: relative;
text-align: center;
background: orange;
overflow: hidden;
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
transition: 0.4s all ease;
}
.portfolio-item a:hover:after {
content: " ";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.4), transparent 100%);
}
.portfolio-item h4, .portfolio-item img {
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
transition: 0.4s all ease;
}
.portfolio-item img {
width: 100%;
hegight: 100%;
position: absolute;
top: 0;
left: 0;
}
.portfolio-item:before {
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
height: 100%;
vertical-align: middle;
}
.portfolio-item h4 {
opacity: 0;
color: white;
font-size: 30px;
vertical-align: middle;
/*#include transform(scale(.5));*/
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
/* sino en safari no va */
width: 200px;
font-weight: bold;
text-transform: uppercase;
-webkit-transform: translateX(-2px);
-moz-transform: translateX(-2px);
-ms-transform: translateX(-2px);
transform: translateX(-2px);
}
.portfolio-item:hover {
z-index: 9;
}
.portfolio-item:hover img {
opacity: 0;
-webkit-transform: scale(1.07);
-moz-transform: scale(1.07);
-ms-transform: scale(1.07);
transform: scale(1.07);
}
.portfolio-item:hover h4 {
-webkit-transform: translateX(3px);
-moz-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
/*-webkit-animation-duration: 0.4s;
-webkit-transform-origin:50% 50%;
-webkit-animation-timing-function: linear;
-moz-animation-duration: 0.4s;
-moz-transform-origin:50% 50%;
-moz-animation-timing-function: linear;
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;*/
opacity: 1;
}
HTML:
<ul><li class="portfolio-item" style="background-color: #6220E5;">
<a href="#">
<img src="http://dummyimage.com/300x300/dddddd/cccccc" alt="camper" />
<h4>Text goes here</h4>
</a>
</li></ul>
Test:
http://jsfiddle.net/kuX39/
-EDIT-
Funny thing is that I noticed that if instead of applying it to :hover i apply it to .hover and toggle the class then the animations works the same... :S
The problem comes from this rule:
.portfolio-item a:hover:after {
content: " ";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.4), transparent 100%);
}
where you define all the after pseudoelement only in the hover state. If the a element is not hovered, the pseudo element is undefined, and can take whatever value the browser decides.
If you set the same on the un-hovered element, it works fine.
.portfolio-item a:after {
content: " ";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.4), transparent 100%);
}
updated demo
By the way, my firefox version is using transition and not moz-transition
Is it possible to use CSS transitions to animate something between a position set as left: 0px to right: 0px so it goes all the way across the screen? I need to accomplish the same thing with top to bottom. Am I stuck calculating the screen width / object-size?
#nav {
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
-webkit-transition: all 0.5s ease-out;
}
.moveto {
top: 0px;
right: 0px;
}
and then I use jQuery's .addClass
You can animate the position (top, bottom, left, right) and then subtract the element's width or height through a CSS transformation.
Consider:
$('.animate').on('click', function(){
$(this).toggleClass("move");
})
.animate {
height: 100px;
width: 100px;
background-color: #c00;
transition: all 1s ease;
position: absolute;
cursor: pointer;
font: 13px/100px sans-serif;
color: white;
text-align: center;
}
/* ↓ just to position things */
.animate.left { left: 0; top: 50%; margin-top: -100px;}
.animate.right { right: 0; top: 50%; }
.animate.top { top: 0; left: 50%; }
.animate.bottom { bottom: 0; left: 50%; margin-left: -100px;}
.animate.left.move {
left: 100%;
transform: translate(-100%, 0);
}
.animate.right.move {
right: 100%;
transform: translate(100%, 0);
}
.animate.top.move {
top: 100%;
transform: translate(0, -100%);
}
.animate.bottom.move {
bottom: 100%;
transform: translate(0, 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click to animate
<div class="animate left">left</div>
<div class="animate top">top</div>
<div class="animate bottom">bottom</div>
<div class="animate right">right</div>
And then animate depending on the position...
For elements with dynamic width it's possible to use transform: translateX(-100%); to counter the horizontal percentage value. This leads to two possible solutions:
1. Option: moving the element in the entire viewport:
Transition from:
transform: translateX(0);
to
transform: translateX(calc(100vw - 100%));
#viewportPendulum {
position: fixed;
left: 0;
top: 0;
animation: 2s ease-in-out infinite alternate swingViewport;
/* just for styling purposes */
background: #c70039;
padding: 1rem;
color: #fff;
font-family: sans-serif;
}
#keyframes swingViewport {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(100vw - 100%));
}
}
<div id="viewportPendulum">Viewport</div>
2. Option: moving the element in the parent container:
Transition from:
transform: translateX(0);
left: 0;
to
left: 100%;
transform: translateX(-100%);
#parentPendulum {
position: relative;
display: inline-block;
animation: 2s ease-in-out infinite alternate swingParent;
/* just for styling purposes */
background: #c70039;
padding: 1rem;
color: #fff;
font-family: sans-serif;
}
#keyframes swingParent {
from {
transform: translateX(0);
left: 0;
}
to {
left: 100%;
transform: translateX(-100%);
}
}
.wrapper {
padding: 2rem 0;
margin: 2rem 15%;
background: #eee;
}
<div class="wrapper">
<div id="parentPendulum">Parent</div>
</div>
Demo on Codepen
Note: This approach can easily be extended to work for vertical positioning. Visit example here.
This worked for me on Chromium. The % for translate is in reference to the size of the bounding box of the element it is applied to so it perfectly gets the element to the lower right edge while not having to switch which property is used to specify it's location.
topleft {
top: 0%;
left: 0%;
}
bottomright {
top: 100%;
left: 100%;
-webkit-transform: translate(-100%,-100%);
}
In more modern browsers (including IE 10+) you can now use calc():
.moveto {
top: 0px;
left: calc(100% - 50px);
}