LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
  • Navigation Item
  • Navigation Item
  • Navigation Item
  • Navigation Item

This is a small pen for showing that rotations in Safari are broken.
They need to have an extra container with fixed position. Otherwise they are cut off during the animation.

CSS
body {
  font: 15px sans-serif;
  margin: 0;
  padding: 0;
}

main {
  padding-top: 200px;
}

ul {
  -webkit-transition: -webkit-transform 2s ease;
  transition: -webkit-transform 2s ease;
  transition: transform 2s ease;
  transition: transform 2s ease, -webkit-transform 2s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  list-style-type: none;
  -webkit-animation: rotation 5s infinite;
          animation: rotation 5s infinite;
}

li {
  -webkit-transform: none;
          transform: none;
  margin: 0 1em 0 0;
  padding: 1.5em;
  background: #ffce54;
}

p {
  padding: 0 2em;
  width: 70%;
  font-size: 1.25em;
  line-height: 1.3;
}

.fixed-wrapper {
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 0;
  width: 100%;
  height: 100px;
  background: #a0cecb;
}

.second-wrapper {
  top: 100px;
  background: #7db1b1;
}

.fixed-container {
  position: fixed;
}

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  50% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}

@keyframes rotation {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  50% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}

Description

This is a small pen for showing that rotations in Safari are broken. They need to have an extra container with fixed position. Otherwise they are cut off during the animation.
Term
Sat, 01/13/2018 - 16:17

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv