LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Webkit transform transition "blur" workaround

It looks like Webkit renders elements as images during animated transforms, so if scaling up an element it appears to blur untl the transition has finished.

A solution (admittedly a janky one) might be to size the element as big as you will ever need it in the first place, and use a transformation to scale it down for initial display - eg if doubling the size on hover, instead of doing "scale(2,2)", start with "size:200%, scale:(.5,.5)" and on hover switch to "scale(1,1)"...

Hover below for example of crappy workaround :)

Normal (blurs on transition)

2x size, "pre-scaled" down to 50% (no blur)

CSS
.normal {
  width: 200px;
  height: 200px;
  margin: 1em auto;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}
.normal:hover {
  -webkit-transform: scale(2, 2);
          transform: scale(2, 2);
}
.prescaled {
  width: 400px;
  height: 400px;
  margin: 1em auto;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
  -webkit-transform: scale(0.5, 0.5);
          transform: scale(0.5, 0.5);
  position: relative;
  top: -100px;
}
.prescaled:hover {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
div {
  background-size: contain;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMHB4IiB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDMuMC4zICg3ODkxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5VbnRpdGxlZDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMSIgc3Ryb2tlPSIjMDAwMDAwIiBmaWxsPSIjRDhEOEQ4IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PC9yZWN0PgogICAgICAgIDxwYXRoIGQ9Ik00OC43MTcyODUyLDEwNC4zMjI3NTQgTDQyLjkyODIyMjcsMTAwLjgxODg0OCBDMzkuMjk3MzQ1MSw5OC42MDk4NTIyIDM2LjcxMzg3NDksOTYuNDMyNjI3OSAzNS4xNzc3MzQ0LDk0LjI4NzEwOTQgQzMzLjY0MTU5MzksOTIuMTQxNTkwOCAzMi44NzM1MzUyLDg5LjY3MjM3NzIgMzIuODczNTM1Miw4Ni44NzkzOTQ1IEMzMi44NzM1MzUyLDgyLjY4OTkyMDUgMzQuMzI3MTMzOSw3OS4yODc2MTA3IDM3LjIzNDM3NSw3Ni42NzIzNjMzIEM0MC4xNDE2MTYxLDc0LjA1NzExNTggNDMuOTE4NDMzOCw3Mi43NDk1MTE3IDQ4LjU2NDk0MTQsNzIuNzQ5NTExNyBDNTMuMDA4MzIzLDcyLjc0OTUxMTcgNTcuMDgzNDc3Niw3My45OTM2Mzk5IDYwLjc5MDUyNzMsNzYuNDgxOTMzNiBMNjAuNzkwNTI3Myw4NS4xMjc0NDE0IEM1Ni45NTY1MjM4LDgxLjQ0NTc4MjQgNTIuODMwNTg4NSw3OS42MDQ5ODA1IDQ4LjQxMjU5NzcsNzkuNjA0OTgwNSBDNDUuOTI0MzA0LDc5LjYwNDk4MDUgNDMuODgwMzc5MSw4MC4xODI2MTE0IDQyLjI4MDc2MTcsODEuMzM3ODkwNiBDNDAuNjgxMTQ0Myw4Mi40OTMxNjk4IDM5Ljg4MTM0NzcsODMuOTcyMTU5IDM5Ljg4MTM0NzcsODUuNzc0OTAyMyBDMzkuODgxMzQ3Nyw4Ny4zNzQ1MTk3IDQwLjQ2NTMyNjIsODguODcyNTUxNiA0MS42MzMzMDA4LDkwLjI2OTA0MyBDNDIuODAxMjc1NCw5MS42NjU1MzQzIDQ0LjY5Mjg1OCw5My4xMjU0ODA3IDQ3LjMwODEwNTUsOTQuNjQ4OTI1OCBMNTMuMTM1MjUzOSw5OC4wNzY2NjAyIEM1OS42MzUyODY0LDEwMS45MzYwNTQgNjIuODg1MjUzOSwxMDYuODYxNzg2IDYyLjg4NTI1MzksMTEyLjg1NDAwNCBDNjIuODg1MjUzOSwxMTcuMTE5NjUgNjEuNDU3MDQ1NSwxMjAuNTg1NDM2IDU4LjYwMDU4NTksMTIzLjI1MTQ2NSBDNTUuNzQ0MTI2MywxMjUuOTE3NDk0IDUyLjAzMDc4NDYsMTI3LjI1MDQ4OCA0Ny40NjA0NDkyLDEyNy4yNTA0ODggQzQyLjIwNDU2MzYsMTI3LjI1MDQ4OCAzNy40MTg0Nzg2LDEyNS42MzgyIDMzLjEwMjA1MDgsMTIyLjQxMzU3NCBMMzMuMTAyMDUwOCwxMTIuNzM5NzQ2IEMzNy4yMTUzNTI2LDExNy45NDQ4NSA0MS45NzYwNDcyLDEyMC41NDczNjMgNDcuMzg0Mjc3MywxMjAuNTQ3MzYzIEM0OS43NzEwMDgsMTIwLjU0NzM2MyA1MS43NTc4MDQ2LDExOS44ODA4NjYgNTMuMzQ0NzI2NiwxMTguNTQ3ODUyIEM1NC45MzE2NDg2LDExNy4yMTQ4MzcgNTUuNzI1MDk3NywxMTUuNTQ1NDIgNTUuNzI1MDk3NywxMTMuNTM5NTUxIEM1NS43MjUwOTc3LDExMC4yODk1MzUgNTMuMzg5MTgzNSwxMDcuMjE3MyA0OC43MTcyODUyLDEwNC4zMjI3NTQgTDQ4LjcxNzI4NTIsMTA0LjMyMjc1NCBaIE0xMDQuOTMyMTI5LDczLjQzNTA1ODYgTDExMi41MTEyMyw3My40MzUwNTg2IEw5MC4wNDA1MjczLDEyNi44Njk2MjkgTDg4LjMyNjY2MDIsMTI2Ljg2OTYyOSBMNjUuMzk4OTI1OCw3My40MzUwNTg2IEw3My4wNTQxOTkyLDczLjQzNTA1ODYgTDg5LjA1MDI5MywxMTAuNzk3MzYzIEwxMDQuOTMyMTI5LDczLjQzNTA1ODYgWiBNMTQ0LjAwODMwMSwxMDAuNDM3OTg4IEwxNjEuODcwNjA1LDEwMC40Mzc5ODggTDE2MS44NzA2MDUsMTIyLjk4NDg2MyBDMTU1LjMxOTc5MSwxMjUuODI4NjI3IDE0OC44MTk4NTYsMTI3LjI1MDQ4OCAxNDIuMzcwNjA1LDEyNy4yNTA0ODggQzEzMy41NjAwMTUsMTI3LjI1MDQ4OCAxMjYuNTIwNTM0LDEyNC42Nzk3MTMgMTIxLjI1MTk1MywxMTkuNTM4MDg2IEMxMTUuOTgzMzcyLDExNC4zOTY0NTkgMTEzLjM0OTEyMSwxMDguMDU1MjEzIDExMy4zNDkxMjEsMTAwLjUxNDE2IEMxMTMuMzQ5MTIxLDkyLjU2Njg1NDggMTE2LjA3ODU4Niw4NS45NTI2NjMxIDEyMS41Mzc1OTgsODAuNjcxMzg2NyBDMTI2Ljk5NjYwOSw3NS4zOTAxMTAzIDEzMy44MzkzMTQsNzIuNzQ5NTExNyAxNDIuMDY1OTE4LDcyLjc0OTUxMTcgQzE0NS4wNjIwMjcsNzIuNzQ5NTExNyAxNDcuOTA1NzQ4LDczLjA3MzIzOSAxNTAuNTk3MTY4LDczLjcyMDcwMzEgQzE1My4yODg1ODgsNzQuMzY4MTY3MyAxNTYuNjkwODk3LDc1LjU1NTE2NzEgMTYwLjgwNDE5OSw3Ny4yODE3MzgzIEwxNjAuODA0MTk5LDg1LjA1MTI2OTUgQzE1NC40NTY1MTEsODEuMzY5NjEwNSAxNDguMTU5Njk5LDc5LjUyODgwODYgMTQxLjkxMzU3NCw3OS41Mjg4MDg2IEMxMzYuMDk5MDkyLDc5LjUyODgwODYgMTMxLjE5ODc1LDgxLjUwOTI1NzUgMTI3LjIxMjQwMiw4NS40NzAyMTQ4IEMxMjMuMjI2MDU0LDg5LjQzMTE3MjEgMTIxLjIzMjkxLDk0LjI5MzQyODIgMTIxLjIzMjkxLDEwMC4wNTcxMjkgQzEyMS4yMzI5MSwxMDYuMTAwMTI4IDEyMy4yMjYwNTQsMTExLjAzODU1NSAxMjcuMjEyNDAyLDExNC44NzI1NTkgQzEzMS4xOTg3NSwxMTguNzA2NTYyIDEzNi4zMjc2MDUsMTIwLjYyMzUzNSAxNDIuNTk5MTIxLDEyMC42MjM1MzUgQzE0NS42NDYwMTEsMTIwLjYyMzUzNSAxNDkuMjg5NTMsMTE5LjkyNTMgMTUzLjUyOTc4NSwxMTguNTI4ODA5IEwxNTQuMjUzNDE4LDExOC4zMDAyOTMgTDE1NC4yNTM0MTgsMTA3LjIxNzI4NSBMMTQ0LjAwODMwMSwxMDcuMjE3Mjg1IEwxNDQuMDA4MzAxLDEwMC40Mzc5ODggWiIgaWQ9IlNWRyIgZmlsbD0iIzAwMDAwMCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=);
}
body {
  text-align: center;
  margin: 50px;
  font-family: Helvetica, sans-serif;
  color: #000;
}
h1 {
  font-size: 150%;
  margin: 0 0 1em 0;
}
h2 {
  font-size: 120%;
  margin: 3em 0 1em 0;
}
p {
  line-height: 140%;
  margin: 1em 0;
}
Host Instantly Drag and Drop Website Builder

 

Description

For Rich!
Term
Mon, 11/27/2017 - 22:09

Related Codes

Pen ID
Pen ID
Pen ID