Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

CSS: safari animation issue

Tags:

css

button

webkit

transform

before posting, I have read:

  • Safari 8 Only CSS Animation Issue

Alright, I am building a css button, some issue only occurs in Safari.

  • if you run the snippets in Chrome, it works exactly what I expect.

  • if you run this in Safari, the span effect doesn't work well.

body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}

a{
  position: relative;
  padding: 25px 50px;
  text-decoration: none;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
  box-shadow: 0 5px 5px rgba(0,0,0,.2);
}

a::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,.1);
}

a::after{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transition: 0.5s;
}

a:hover::after{
  left: 100%;
}

a span{
  position: absolute;
  display: block;
  transition: 0.5s ease;
}

a span:nth-child(1){
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
}

a:hover span:nth-child(1){
  width: 100%;
  transform: translateX(100%);
}

a span:nth-child(3){
  bottom: 0;
  right: 0;
  width: 0;
  height: 1px;
  background: #fff;
}

a:hover span:nth-child(3){
  width: 100%;
  transform: translateX(-100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <a href='#'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Button
  </a>

</body>
</html>

I have tried to add browser support such as:

    -webkit-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -moz-transform: translateX(-100%);

but it still doesn't work. Could someone offers some suggestions, I want Safari to give the same result as chrome.

UPDATE

This must be a priority issue since I tried:

body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}

a{
  position: relative;
  padding: 25px 50px;
  text-decoration: none;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
  box-shadow: 0 5px 5px rgba(0,0,0,.2);
}

a::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,.1);
}

a::after{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  -webkit-transition: 2s;
}

a:hover::after{
  left: 100%;
}

a span{
  position: absolute;
  display: block;
  -webkit-transition: 2s ease;
}

a span:nth-child(1){
  position: relative;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
}

a:hover span:nth-child(1){
  width: 100%;
  -webkit-transform: translateX(100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <a href='#'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Button
  </a>

</body>
</html>
like image 737
Weilory Avatar asked Feb 14 '26 14:02

Weilory

1 Answers

Make it as you made it for your shadow (in ::after), use left or right:

a:hover span:nth-child(1){
  width: 100%;
  /*-webkit-transform: translateX(100%);*/
  left:100%;
}

a:hover span:nth-child(3){
  width: 100%;
  /*transform: translateX(-100%);*/
  right: 100%;
}

Demo (1):

body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}

a{
  position: relative;
  padding: 25px 50px;
  text-decoration: none;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
  box-shadow: 0 5px 5px rgba(0,0,0,.2);
}

a::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,.1);
}

a::after{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transition: 0.5s;
}

a:hover::after{
  left: 100%;
}

a span{
  position: absolute;
  display: block;
  transition: 0.5s ease;
}

a span:nth-child(1){
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
}

a:hover span:nth-child(1){
  width: 100%;
  /*transform: translateX(100%);*/
  left: 100%;
}

a span:nth-child(3){
  bottom: 0;
  right: 0;
  width: 0;
  height: 1px;
  background: #fff;
}

a:hover span:nth-child(3){
  width: 100%;
  /*transform: translateX(-100%);*/
  right: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <a href='#'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Button
  </a>

</body>
</html>

DEMO (update):

body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}

a{
  position: relative;
  padding: 25px 50px;
  text-decoration: none;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
  box-shadow: 0 5px 5px rgba(0,0,0,.2);
}

a::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,.1);
}

a::after{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  -webkit-transition: 2s;
}

a:hover::after{
  left: 100%;
}

a span{
  position: absolute;
  display: block;
  -webkit-transition: 2s ease;
}

a span:nth-child(1){
  position: relative;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
}

a:hover span:nth-child(1){
  width: 100%;
  /*-webkit-transform: translateX(100%);*/
  left:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <a href='#'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Button
  </a>

</body>
</html>
like image 130
MaxiGui Avatar answered Feb 17 '26 22:02

MaxiGui

Sign in to Comment

Related questions

Media Queries not working at all whatsoever
CSS transition on :after is not working
float element position changes elements alignments
CSS `Filter: blur()` not working properly on Safari
Artifacts with SVG text animations (CSS3)
Color not being inherited by child elements?
Strange requests which ends with -moz-zoom-in
Creating very large sprite sheets for video
how to Design a vista like button using CSS
IE 11 SVG animation smoothness
Why Javascript returns different resolution of the device display?
HTML button text alignment in Firefox
How to load css3 pie only for ie7 and 8? But not for 9
Flexbox centering within paper-css A4 page
CSS/SVG Animation Effect - Three Bouncing Squares - Correct Timing
Why won't this vertically align? Img to the left of div
Styling an SVG tile layer with CSS in Leaflet

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!