Firefox transition issues - html

I am trying to do this effect on my site:
http://codepen.io/anon/pen/dPzarw
<svg width="100" height="100">
<g id="cross_svg">
<rect id="Rectangle-1" x="0" y="0" width="48" height="2" fill="transparent"></rect>
<rect id="Rectangle-2" x="0" y="14" width="48" height="2" fill="transparent"></rect>
<rect id="Rectangle-4" x="0" y="28" width="48" height="2" fill="transparent"></rect>
</g>
</svg>
CSS:
svg {
width: 52px;
height: 52px;
z-index: 99999;
transition: all .3s ease;
display: block;
margin: 15% auto;
cursor: pointer;
}
svg g {
transition: all .3s ease;
width: 100px;
height: 100px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin: auto;
cursor: pointer;
}
svg rect {
transition: all .3s ease;
fill: #E04681;
}
svg g {
width: 100px;
height: 100px;
}
Javascript:
$(document).ready(function(){
var svg = $('svg');
var lines = svg.find('rect');
var line_first = $('svg rect:nth-child(1)')
var line_second = $('svg rect:nth-child(2)')
var line_third = $('svg rect:nth-child(3)')
var i = true;
svg.on('click', function(){
if (i) {
setTimeout(function(){
$(this).find("g").addClass('gotcha')
line_first.css({
'transform':'rotate(45deg)',
'left':'50%',
'top':'50%',
'width':'200px',
// This line BELONGS to #dervondenbergen :D
// Enjoy your propriety my friend.
'transform-origin': 'left bottom'
})
line_third.css({
'transform':'rotate(-45deg) translate(-50%,-50%)',
'left':'50%',
'top':'50%'
})
line_second.css('opacity','0')
},005)
} else {
setTimeout(function(){
line_first.attr('style', '');
line_third.attr('style', '');
line_second.css('opacity','1')
},005)
}
i=!i;
});
});
If that link doesn't work it is the SVG version from this page:
http://lukyvj.github.io/menu-to-cross-icon/
This works great in chrome and safari but when I tried it in firefox it was broken. In firefox it works, but its almost like it moved the line so it is an X without the bottom left leg. This is on the mobile version of firefox as well. Is there any special coding that needs to be done to allow this to work in firefox?

Related

Mojave Safari 14.1.2 - css animation svg disappearing during playback

Is someone able to explain a problem in Safari for this simple example:
codepen example
The logo-1 class element should animate into position from right to left. On mac it works in Firefox, Chrome and in IE11/win8 in the original bigger piece of code. In Safari during css animation the svg graphics disappears and appears only after animation is done. It only animates correctly if there is an extra dummy sibling to the svg element with a 3d transform applied to it. It needs to be on a lower z-index than the svg or the animation display fails. Ideally the svg element should be the only child of the logo-1 class element.
In the codepen example animation shows correctly for me in Safari only in the first main div that has the extra element under logo-1 element.
Any ideas?
Codepen code:
.logo-1 svg {
position: absolute;
top: 0;
left: 0;
}
.logo-1-sequence {
position: absolute;
top: 0;
left: 0;
display: block;
width: 113px;
height: 134px;
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}
#keyframes kf-frame-1-logo-1-in {
0% {
transform: scale3d(0.47, 0.47, 1) translate3d(2078px, 20px, 0);
}
100% {
transform: scale3d(0.47, 0.47, 1) translate3d(1578px, 20px, 0);
}
}
.logo-1 {
position: absolute;
z-index: 2;
width: 93px;
height: 150px;
background-color: red;
animation: kf-frame-1-logo-1-in 0.5s 0.5s both linear 1;
}
.main {
background: green;
position: relative;
width: 900px;
height: 150px;
display: block;
overflow: hidden;
}
<div class="main">
<div class="logo-1">
<div class="logo-1-sequence"></div>
<svg class="logo-1-svg" xmlns="http://www.w3.org/2000/svg" width="93" height="150" viewBox="0 0 93 150">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />
</svg>
</div>
</div>
<div class="main">
<div class="logo-1">
<!-- <div class="logo-1-sequence"></div> -->
<svg class="logo-1-svg" xmlns="http://www.w3.org/2000/svg" width="93" height="150" viewBox="0 0 93 150">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />
</svg>
</div>
</div>

CSS svg hover animation/transition

im using a svg clip-path as mask for an image.
Now i want an inner border inside it on hover.
So i made a second clip-path for hover but the transition doesnt affect it.
I want the border comming from the sides (reducing zoom/negative scaling).
Here you can see what i want without working animation/transition:
body {
background: #ccc;
}
.clip-svg {
position: relative;
display: block;
height: 400px;
width: 300px;
background-position: center center;
background-size: auto 100%;
clip-path: url(#Emblem);
transition: 0.4s all ease;
}
.clip-svg:hover {
clip-path: url(#Emblem2);
}
<div class="clip-svg" style="background-image: url(https://images.pexels.com/photos/864994/pexels-photo-864994.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)"></div>
<svg width="0" height="0">
<defs>
<clipPath id="Emblem">
<path d="M279,240c0,96-139.4,145-139.4,145S22,336,22,240c0-58,0-203,0-203s65-11,129-11c75,0,128,11,128,11S279,136,279,240z"/>
</clipPath>
<clipPath id="Emblem2">
<path d="M39,51.6V240c0,72.4,80.9,116.6,101.2,126.5c11-4.5,35.7-15.4,59.8-32.3c18.5-13,33.2-26.8,43.6-41.3
c12.2-17,18.4-34.8,18.4-53V51.3C240.8,48,200.9,43,151,43C106.3,43,59.9,48.7,39,51.6z"/>
<path d="M151,26C87,26,22,37,22,37s0,145,0,203c0,96,117.6,145,117.6,145S279,336,279,240c0-104,0-203,0-203S226,26,151,26z
M270,240c0,19.9-6.7,39.3-19.9,57.7c-10.9,15.1-26.2,29.7-45.5,43.1c-26.2,18.3-52.8,29.8-63.1,33.8l-1.6,0.6l-1.6-0.8
c-10.4-5-37.2-18.9-61.3-41.3c-30.5-28.4-46-59.7-46-93.2V44.7l3.4-0.5C53.5,41.4,103.1,35,151,35c53.2,0,95.3,5.6,115.6,8.9
l3.4,0.5V240z"/>
</clipPath>
</defs>
</svg>
<br/>
Image: https://www.pexels.com/...d-tablet-864994/
Thanks in advance
I would consider two layers each one using a clip-path and I would control the opacity:
body {
background: #ccc;
}
.clip-svg {
position: relative;
display: inline-block;
height: 400px;
width: 300px;
}
.clip-svg::before,
.clip-svg::after {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-position: center center;
background-size: auto 100%;
background-image: var(--i);
transition: 0.8s all ease;
}
.clip-svg::before {
clip-path: url(#Emblem2);
}
.clip-svg::after {
clip-path: url(#Emblem);
}
.clip-svg:hover::after {
opacity:0;
}
<div class="clip-svg" style="--i: url(https://images.pexels.com/photos/864994/pexels-photo-864994.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)"></div>
<svg width="0" height="0">
<defs>
<clipPath id="Emblem">
<path d="M279,240c0,96-139.4,145-139.4,145S22,336,22,240c0-58,0-203,0-203s65-11,129-11c75,0,128,11,128,11S279,136,279,240z"/>
</clipPath>
<clipPath id="Emblem2">
<path d="M39,51.6V240c0,72.4,80.9,116.6,101.2,126.5c11-4.5,35.7-15.4,59.8-32.3c18.5-13,33.2-26.8,43.6-41.3
c12.2-17,18.4-34.8,18.4-53V51.3C240.8,48,200.9,43,151,43C106.3,43,59.9,48.7,39,51.6z"/>
<path d="M151,26C87,26,22,37,22,37s0,145,0,203c0,96,117.6,145,117.6,145S279,336,279,240c0-104,0-203,0-203S226,26,151,26z
M270,240c0,19.9-6.7,39.3-19.9,57.7c-10.9,15.1-26.2,29.7-45.5,43.1c-26.2,18.3-52.8,29.8-63.1,33.8l-1.6,0.6l-1.6-0.8
c-10.4-5-37.2-18.9-61.3-41.3c-30.5-28.4-46-59.7-46-93.2V44.7l3.4-0.5C53.5,41.4,103.1,35,151,35c53.2,0,95.3,5.6,115.6,8.9
l3.4,0.5V240z"/>
</clipPath>
</defs>
</svg>
I don't see a way to achieve what you want using clip paths on an HTML element. You can only replace one clip path with another in CSS. You can't interpolate between two of them.
However it is fairly easy to do, if you are okay with moving the image into an SVG. Then you can do whatever you want with the inner border.
Note however, with this solution, the inner border is not a clip path, so it doesn't make the image transparent. I don't know if that is important to you or not. It should be possible to do that if you really need it to.
body {
background: #ccc;
}
.clip-svg .emblem2-ref {
transform-origin: 150px 200px;
transform: scale(1.2, 1.2);
transition: 0.4s all ease;
}
.clip-svg:hover .emblem2-ref {
transform: scale(1, 1);
}
#Emblem2 {
fill: #ccc;
}
<!-- Clip path and inner border definitions. Can be included once and used by multiple SVGs -->
<svg width="0" height="0">
<defs>
<clipPath id="Emblem">
<path d="M279,240c0,96-139.4,145-139.4,145S22,336,22,240c0-58,0-203,0-203s65-11,129-11c75,0,128,11,128,11S279,136,279,240z"/>
</clipPath>
<path id="Emblem2"
d="M39,51.6V240c0,72.4,80.9,116.6,101.2,126.5c11-4.5,35.7-15.4,59.8-32.3c18.5-13,33.2-26.8,43.6-41.3
c12.2-17,18.4-34.8,18.4-53V51.3C240.8,48,200.9,43,151,43C106.3,43,59.9,48.7,39,51.6z
M270,240c0,19.9-6.7,39.3-19.9,57.7c-10.9,15.1-26.2,29.7-45.5,43.1c-26.2,18.3-52.8,29.8-63.1,33.8l-1.6,0.6l-1.6-0.8
c-10.4-5-37.2-18.9-61.3-41.3c-30.5-28.4-46-59.7-46-93.2V44.7l3.4-0.5C53.5,41.4,103.1,35,151,35c53.2,0,95.3,5.6,115.6,8.9
l3.4,0.5V240z"/>
</defs>
</svg>
<!-- Will need one of these SVGs for every image you want to display -->
<svg width="300" height="400" class="clip-svg">
<g clip-path="url(#Emblem)">
<image width="300" height="400" preserveAspectRatio="xMidYMid slice"
xlink:href="https://images.pexels.com/photos/864994/pexels-photo-864994.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"/>
<use class="emblem2-ref" xlink:href="#Emblem2"/>
</g>
</svg>
<br/>
Image: https://www.pexels.com/...d-tablet-864994/

SVG/Layer not working in IE and Webkit, Firefox is fine though

I'm completely stuck, i really need help guys!
Below are my snippets, which i've trimmed down as much as possible and edited a bit to show correctly on jsfiddle.
Also here is the JSFiddle: https://jsfiddle.net/oqfdfart/9/
What i need: a transparent half circle in my header that lets through my bg image, but also has a border. I managed to do this with 2 SVG's.
However only firefox shows everything fine, but all other browsers don't.
I'm eternally grateful for any help!
$(document).ready(function() {
var $myCarousel = $('#myCarousel');
function setCaptTotalheight(captid, maxheight) {
setTimeout(function() {
sliderheight = $('#slideimg' + captid).height();
//alert(sliderheight);
if (sliderheight > 0) {
if (sliderheight > maxheight) {
useheight = maxheight;
} else {
useheight = sliderheight;
}
$('.container-carousel').attr('style', 'height:' + useheight + 'px;padding:0px; overflow:hidden;');
$('.header-carousel').attr('style', 'height:' + useheight + 'px; overflow:hidden;');
$('#slide' + captid).attr('style', 'height:' + useheight + 'px;');
}
}, 5);
}
function setCaptheight(captid, maxheight) {}
var $navElemsId = $myCarousel.find('.item:first').attr('data-id');
var $navElemsCenter = $myCarousel.find('.item:first').attr('data-center');
var $navElemsMaxHeight = $myCarousel.find('.item:first').attr('data-maxheight');
if ($navElemsCenter == 1) {
setCaptTotalheight($navElemsId, $navElemsMaxHeight);
setCaptheight($navElemsId, $navElemsMaxHeight);
}
if ($navElemsCenter == 2) {
setCaptTotalheight($navElemsId, $navElemsMaxHeight);
}
});
#import url( 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css' );
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
body{
background: #eee;
}
#headeroverlay {
width: 100%;
height: 100%;
}
.carousel {
background: url(http://placehold.it/230x50) no-repeat 50% 95%;
}
#myCarousel .item {
border-bottom: 5px solid #942994;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
mask: url(#mask);
}
.nopadding {
padding: 0;
}
#headeroverlay {
width: 100%;
position: absolute;
top:0;
background: rgba(255,255,255,0);
height: 223px;
z-index: auto;
}
#innercircle {
position: absolute;
top: 0;
left: 0;
}
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="mp-pusher maincontainer maincontainer-602" id="mp-pusher" style="position:inherit">
<div class="container-fluid container-fluid-header header-container-above-menu container-carousel" style="height:auto; max-height:499px; overflow:hidden; padding:0px;"><!-- start carousel -->
<div id="myCarousel" class="carousel carousel-fade slide myCarousel-slide" style="height:auto; max-height:499px; overflow:hidden">
<div class="carousel-inner" role="listbox">
<div id="slide2" class="item active" data-navpos="" data-navposarrow="" data-center="1" data-maxheight="499" data-id="2" style=""><img id="slideimg2" class="logofull img-responsive" src="http://placehold.it/1920x499" /></div>
</div>
</div>
<section id="headeroverlay" class="headeroverlay">
<svg width="100%" height="100%">
<defs>
<style type="text/css"><![CDATA[
#inner {
stroke: #942994;
stroke-width: 5;
fill-opacity: 0;
z-index: 9999;
}
]]></style>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
<circle id="c1" cx="50%" cy="105%" r="180" fill="#000"/>
</mask>
</defs>
<rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0"/>
</svg>
<svg id="innercircle" width="100%" height="100%" x="0" y="0">
<circle id="inner" x="0" y="0" cx="50%" cy="105%" r="181" fill="#fff" />
</svg>
</section>
</div>

Animating SVG rect x property via CSS

I have a classic mobile three-bars menu button made with SVG. I would like to animate each bar on click.
This is my code:
$('#menu_button').click(
function() {
$(this).toggleClass('open');
}
);
#menu_button .rectangle {
left: 0;
x: 0;
transition: all ease 1s;
}
#menu_button .rectangle.first {
transform: rotate(0deg);
top: 0;
y: 0;
}
#menu_button .rectangle.second {
transform: rotate(0deg);
transform-origin: 8px 9px;
top: 6px;
y: 6;
}
#menu_button .rectangle.third {
transform: rotate(0deg);
transform-origin: 11px 9px;
top: 12px;
y: 12;
}
#menu_button.open .rectangle.first {
top: 23.2px;
y: 23.2px;
}
#menu_button.open .rectangle.second {
transform: rotate(405deg);
}
#menu_button.open .rectangle.third {
transform: rotate(495deg);
left: 0;
x: 0;
top: 8px;
y: 8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg width="22" height="35" id="menu_button" class="hidden-sm hidden-md hidden-lg">
<rect style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;" class="rectangle first" width="22" height="2" x="0" y="0" />
<rect style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;" class="rectangle second" width="22" height="2" x="0" y="6" />
<rect style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;" class="rectangle third" width="22" height="2" x="0" y="12" />
</svg>
JSFiddle for those like me who can't run the snippet: https://jsfiddle.net/9rkoLcx8/2/
The issue is with Firefox.
I mean, everything is working fine on Chrome and Opera, this doesn't work on Safari (it has no animation but it's still ok as it doesn't break things up), and works half in firefox: it rotates correctly but doesn't animate the x and y of SVG rects.
This is what I think: x and y are rect attributes, not CSS properties, so not only they shouldn't work on Firefox, they shouldn't work on Chrome and Opera too. That's why I added top and left, but it still doesn't work.
Is there a way to make the animation of x and y work in Firefox too?

Reveal hidden letters from the left by sliding to the right

I want to make the content animate so that the letters slide in to the right from the "T".
Here is a jsfiddle of the below:
.two {
width: auto;
-webkit-transition: all 1s ease;
}
.two:before {
content: "T";
width: auto;
}
.two:hover {
width: auto;
}
.two:hover:before {
display: none;
}
.two:hover:after {
content: "This is a Label";
width: auto
}
<div class="two">
</div>
Animating opacity of each letter from left to right:
You could animate each letter's opacity by combining svg's linearGradient and mask and using JavaScript for shifting the x1 and x2 attributes of the linearGradienton mouseover and mouseleave events.
var grad = document.getElementById('gradient');
// higher 'animSpeed' yeilds lower speed
var animSpeed = 20;
var two = document.getElementsByClassName('two')[0];
two.addEventListener('mouseenter', function() {
for (i = 0; i < two.offsetWidth; i++) {
var anim = setTimeout(function() {
var x1 = (parseInt(grad.getAttribute('x1').slice(0, -1), 10) + 1) + '%';
var x2 = (parseInt(grad.getAttribute('x2').slice(0, -1), 10) + 1) + '%';
grad.setAttribute('x1', x1);
grad.setAttribute('x2', x2);
}, animSpeed * i)
}
});
two.addEventListener('mouseleave', function() {
for (i = 0; i < two.offsetWidth; i++) {
var anim = setTimeout(function() {
var x1 = (parseInt(grad.getAttribute('x1').slice(0, -1), 10) - 1) + '%';
var x2 = (parseInt(grad.getAttribute('x2').slice(0, -1), 10) - 1) + '%';
grad.setAttribute('x1', x1);
grad.setAttribute('x2', x2);
}, animSpeed * i)
}
})
<svg>
<defs>
<linearGradient id="gradient" x1="-15%" y1="0%" x2="0%" y2="0%">
<stop stop-color="white" offset="0" />
<stop stop-color="black" offset="1" />
</linearGradient>
<mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect width="1" height="1" fill="url(#gradient)" />
</mask>
</defs>
<foreignObject width="90px" height="100%" x="2" y="12" mask="url(#mask)">
<div class="two">This is a label</div>
</foreignObject>
</svg>
Slide from left to right:
You could transition the transform property.
Updated Fiddle
.two {
display: block;
width: 300px;
padding: 15px;
}
.two:before {
content: "T";
}
.two:hover:before {
display: none;
}
.two:after {
position: absolute;
content: "This is a Label";
transform: translateX(-150%);
transition: transform 1s ease;
}
.two:hover:after {
content: "This is a Label";
transform: translateX(0%);
}
<div class="two"></div>
Reveal letters with :before mask
If you just want to use CSS, we can create a mask which slides over the text and then is pushed to the right to reveal the text in the div.
Example
.two {
width: 100px;
position: relative;
overflow: hidden;
}
.two:before {
content: '';
position: absolute;
left: 0.6em;
top: 0;
height: 100%;
width: 100%;
background: #FFF;
transition: left 1s;
}
.two:hover:before {
left: 100%;
}
.color:before {
background: #F00;
}
<div class="two">This is a Label</div>
It looks like this (hover):
<div class="two color">This is a Label</div>
This is not possible with just the :before and :after psuedo-elements. Let me suggest another similar approach.
/* start SLIDE-IN code */
.two > .capitalT > .else {
position: relative;
left: -100px;
opacity: 0;
transition: left 0.5s, opacity 0.5s;
}
.two > .capitalT:hover > .else {
left: 0;
opacity: 1;
}
/* end SLIDE-IN code */
<div class="two"><span class="capitalT"><span class="t">T</span><span class="else">his is a Label</span></span>
</div>
CSS is not capable to animate auto values in principle. So consider either
.two:hover::after{ width: 100px;}
( http://jsfiddle.net/k2wou9eh/1/ ) or other options.