Skip to content

Instantly share code, notes, and snippets.

@BrettBukowski
Created February 1, 2012 20:31
Show Gist options
  • Save BrettBukowski/1719135 to your computer and use it in GitHub Desktop.
Save BrettBukowski/1719135 to your computer and use it in GitHub Desktop.
Testing browsers' flickering doing a simple scale transition
/**
* Testing browsers' flickering doing a simple scale transition
*/
body {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAADHmlDQ1BJQ0MgUHJvZmlsZQAAeAGFVN9r01AU/tplnbDhizpnEQk+aJFuZFN0Q5y2a1e6zVrqNrchSJumbVyaxiTtfrAH2YtvOsV38Qc++QcM2YNve5INxhRh+KyIIkz2IrOemzRNJ1MDufe73/nuOSfn5F6g+XFa0xQvDxRVU0/FwvzE5BTf8gFeHEMr/GhNi4YWSiZHQA/Tsnnvs/MOHsZsdO5v36v+Y9WalQwR8BwgvpQ1xCLhWaBpXNR0E+DWie+dMTXCzUxzWKcECR9nOG9jgeGMjSOWZjQ1QJoJwgfFQjpLuEA4mGng8w3YzoEU5CcmqZIuizyrRVIv5WRFsgz28B9zg/JfsKiU6Zut5xCNbZoZTtF8it4fOX1wjOYA1cE/Xxi9QbidcFg246M1fkLNJK4RJr3n7nRpmO1lmpdZKRIlHCS8YlSuM2xp5gsDiZrm0+30UJKwnzS/NDNZ8+PtUJUE6zHF9fZLRvS6vdfbkZMH4zU+pynWf0D+vff1corleZLw67QejdX0W5I6Vtvb5M2mI8PEd1E/A0hCgo4cZCjgkUIMYZpjxKr4TBYZIkqk0ml0VHmyONY7KJOW7RxHeMlfDrheFvVbsrj24Pue3SXXjrwVhcW3o9hR7bWB6bqyE5obf3VhpaNu4Te55ZsbbasLCFH+iuWxSF5lyk+CUdd1NuaQU5f8dQvPMpTuJXYSWAy6rPBe+CpsCk+FF8KXv9TIzt6tEcuAcSw+q55TzcbsJdJM0utkuL+K9ULGGPmQMUNanb4kTZyKOfLaUAsnBneC6+biXC/XB567zF3h+rkIrS5yI47CF/VFfCHwvjO+Pl+3b4hhp9u+02TrozFa67vTkbqisXqUj9sn9j2OqhMZsrG+sX5WCCu0omNqSrN0TwADJW1Ol/MFk+8RhAt8iK4tiY+rYleQTysKb5kMXpcMSa9I2S6wO4/tA7ZT1l3maV9zOfMqcOkb/cPrLjdVBl4ZwNFzLhegM3XkCbB8XizrFdsfPJ63gJE722OtPW1huos+VqvbdC5bHgG7D6vVn8+q1d3n5H8LeKP8BqkjCtbCoV8yAAAACXBIWXMAAAsTAAALEwEAmpwYAAABbmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgrlPw1BAAANiUlEQVRoBW3Zh44k1RKE4Tu7mMUbCfH+r4cRCLP4he/03xNTdyAlctNERuYxVd09PPz8889//vnnX3/99ffff7958+bh4SH94sULxv9uIjgjG1iE/vHHHz/88EP2FSOO8+23344t8BgyKtclVy8SiWCFV85rOUCcn3766QudVPKJAlL977//rmakbCka7Lfffovu5cuXX375pUjuMBhM/+9gDDYLIHAGhj/++KO+P/30E4C+uVIE+J133qHZUm03+4cffnj47rvvipamicngGFK60ugII8mWAhOBZBNGvRkTESmwAMMHKBjgrbfe2oZqUSqYKimAkKUEzz3xD8moWVpluLSgCF4aflqcbEkZTsA+wVxbVgtc7Zrm6qKkXiHbdVmiaqfa5Sx+n0ZZNelY0uHSWurhfGIsCFaEAUAYboIsNtvGECGGUF6LatlqpbiWSlee/euvvwajIaW62DiDnXg1fEZc0VWTlv3ll19oLM1B14PRQKsCIzZPvENAQgTpZ4sXgbEwWY9BGEGPmSBOkZiNztiZWFuAh2+//Zal5joBO5eO69WrV3GJMJSYz1HqqrbGUoKxCU5kAxSpll2Lq9H5BC77n5xXwP19hEV0NXWiNbPod999txr6Kqa/7qhUW96ZcBk7qHGKVAUgWNNo4QsGLmWGbk5BGPFS9CnIYWjfBCIxqhnjxhJk54ZnD6YfyZXtiLoACmMWH77gGeXx3Ro/HQabHeQm3Awl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);
padding-top:40px;
}
.rail {
border-top: 1px solid #999;
border-bottom: 1px solid white;
height: 20px;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
position: relative;
}
.circle {
border-radius: 50%;
border-top: 1px solid rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
height: 100px;
width: 100px;
margin-top:0px;
padding: 40px;
background: #616AFF;
text-shadow:0 1px 0 #FFF;
position: absolute;
box-shadow: 1px 0 10px rgba(255, 255, 255, 0.4) inset;
top:-3px;
left:30%;
cursor: pointer;
-moz-transition: all .2s;
-webkit-transition: all .2s;
-ms-transition: all .2s;
}
.circle:hover {
border-bottom: 1px solid #999;
border-top: 1px solid #FFF;
cursor: pointer;
-webkit-transform:scale(1.6);
-moz-transform:scale(1.6);
-ms-transform:scale(1.6);
}
<!-- content to be placed inside <body>…</body> -->
<div class="rail">
<div class="circle">Hover Me</div>
</div>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment