I have an element whose :before style has to be modified based on calculations.
export class Content extends React.Component {
render() {
return (
<div className="ring-base">
<div className="ring-left" style={{/* Change here */}}></div>
<div className="ring-right" style={{/* Change here */}}></div>
<div className="ring-cover">
<div className="ring-text">10%</div>
</div>
</div>
);
}
}
CSS Code:
.ring-base {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
background: red;
transform: rotate(90deg);
overflow:hidden;
}
.ring-cover {
position: absolute;
height: 180px;
width: 180px;
background: #fff;
border-radius: 50%;
top: 5%;
left: 5%;
}
.ring-cover .ring-text {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
font-size: 2em;
display: flex;
justify-content:center;
align-content:center;
flex-direction:column;
transform: rotate(-90deg);
}
.ring-right, .ring-left {
height: 100px;
width: 200px;
overflow: hidden;
position: absolute;
}
.ring-right:before, .ring-left:before {
height: inherit;
width: inherit;
position: absolute;
content: "";
border-radius: 100px 100px 0 0;
background-color: grey;
transform: rotate(0deg);
}
.ring-right {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
transform: rotateZ(0deg);
}
.ring-left {
transform: rotate(180deg);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ring-right:before {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
transform: rotate(0deg);
}
.ring-left:before {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
The ask is to be able to update the transform property for .ring-left:before and .ring-right:before via ReactJS.
If there is a way to not update the :before class and change the CSS to not make use of :before at all, then do suggest that as well.
Js-Fiddle
You can iterate document.styleSheets, set .style of .cssRules where .selectorText matches pseudo selector
let sheets = document.styleSheets;
let selector = "div::before";
let replacementContent = '"after"';
for (let sheet of sheets) {
for (let rule of sheet.cssRules) {
if (rule.selectorText === selector) {
rule.style["content"] = replacementContent;
}
}
}
div:before {
content: "before";
color: red;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #000;
background: green;
width: 50px;
height: 50px;
display: block;
}
<div></div>
Related
I'm working on a little animation for toggling my website between dark- and light mode. It's a pretty complicated animation, so I'm guessing the solution will be complicated as well.
I basically toggle between classes, but this prevents me from being able to reverse the animation when toggling the button. Been looking for simple solutions around the web, but didn't find any that explains how to reverse the animation with multiple CSS keyframes.
Here's the CSS part of the code which is basically repeated 8 times:
.line {
width: 1rem;
height: 2rem;
background-color: black;
position: absolute;
display: block;
transform: translateY(5rem);
border-radius: 0.5em;
}
.is-dark {
animation: is-dark 2s forwards;
}
#keyframes is-dark {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(0) translateY(5rem);
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(0) translateY(5rem);
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) translateY(0);
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(1rem) translateY(-1rem);
}
}
JS
let line = document.querySelector(".line");
let btn = document.querySelector(".btn");
btn.addEventListener("click", toggleDarkMode);
function toggleDarkMode() {
line.classList.toggle("is-dark");
}
Here's the complete version of this button: https://jsfiddle.net/a6euokxy/4/
Thanks in advance,
Luk Ramon
I have some the solution for you issue. I improved js file, did add into classes with animation alternate infinite paused; properties. In html added classes with animation.
working example with LocalStorage
let theme = 'light';
// Get all container elements
const lines = document.querySelector('.container').querySelectorAll('div');
let btn = document.querySelector('.btn');
btn.addEventListener('click', toggleDarkMode);
function toggleDarkMode() {
if (theme === 'light') {
lines.forEach(line => {
// Remove unnecessary DOM elements
if (!line.hasAttribute('class')) return;
// Set pause after play 2s animation
setTimeout(() => {
line.removeAttribute('style');
}, 2000);
// Start play
line.setAttribute('style', 'animation-play-state: running');
});
theme = 'dark';
return;
}
if (theme === 'dark') {
lines.forEach(line => {
if (!line.hasAttribute('class')) return;
setTimeout(() => {
line.removeAttribute('style');
}, 2000);
line.setAttribute('style', 'animation-play-state: running');
});
theme = 'light';
return;
}
}
* {
padding: 0;
margin: 0;
}
.button {
display: flex;
justify-content: center;
margin-top: 3rem;
}
.button .btn {
background: none;
border: 0.2rem solid black;
font-size: 1rem;
padding: 1rem;
border-radius: 2rem;
font-weight: bold;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#circle {
width: 4rem;
height: 4rem;
border: 1rem solid black;
border-radius: 50%;
position: absolute;
}
#lines {
display: flex;
justify-content: center;
align-items: center;
}
#lines1 {
transform: rotate(45deg);
transform-origin: center;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.line,
.line1,
.line2,
.line3,
.line4,
.line5,
.line6,
.line7 {
width: 1rem;
height: 2rem;
background-color: black;
position: absolute;
display: block;
border-radius: 0.5em;
}
.line {
transform: translateY(5rem);
}
.is-dark {
animation: is-dark 2s alternate infinite paused;
}
#keyframes is-dark {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(0) translateY(5rem);
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(0) translateY(5rem);
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) translateY(0);
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(1rem) translateY(-1rem);
}
}
.line1 {
transform: translateY(-5rem);
}
.is-dark1 {
animation: is-dark1 2s alternate infinite paused;
}
#keyframes is-dark1 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateY(-5rem);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateY(-5rem);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 0;
}
}
.line2 {
transform: translateX(5rem) rotate(90deg);
}
.is-dark2 {
animation: is-dark2 2s alternate infinite paused;
}
#keyframes is-dark2 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(5rem) rotate(90deg);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(5rem) rotate(90deg);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
}
.line3 {
transform: translateX(-5rem) rotate(90deg);
}
.is-dark3 {
animation: is-dark3 2s alternate infinite paused;
}
#keyframes is-dark3 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(-5rem) rotate(90deg);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(-5rem) rotate(90deg);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
}
.line4 {
transform: translateY(5rem);
}
.is-dark4 {
animation: is-dark4 2s alternate infinite paused;
}
#keyframes is-dark4 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(0) translateY(5rem);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(0) translateY(5rem);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) translateY(0);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(1rem) translateY(1rem);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(1rem) translateY(1rem);
opacity: 0;
}
}
.line5 {
transform: translateY(-5rem);
}
.is-dark5 {
animation: is-dark5 2s alternate infinite paused;
}
#keyframes is-dark5 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateY(-5rem);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateY(-5rem);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 0;
}
}
.line6 {
transform: translateX(5rem) rotate(90deg);
}
.is-dark6 {
animation: is-dark6 2s alternate infinite paused;
}
#keyframes is-dark6 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(5rem) rotate(90deg);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(5rem) rotate(90deg);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
}
.line7 {
transform: translateX(-5rem) rotate(90deg);
}
.is-dark7 {
animation: is-dark7 2s alternate infinite paused;
}
#keyframes is-dark7 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(-5rem) rotate(90deg);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(-5rem) rotate(90deg);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
}
<div class="button">
<button class="btn">Dark Mode</button>
</div>
<div class="container">
<div id="circle"></div>
<div id="lines">
<div class="line is-dark"></div>
<div class="line1 is-dark1"></div>
<div class="line2 is-dark2"></div>
<div class="line3 is-dark3"></div>
</div>
<div id="lines1">
<div class="line4 is-dark4"></div>
<div class="line5 is-dark5"></div>
<div class="line6 is-dark6"></div>
<div class="line7 is-dark7"></div>
</div>
</div>
I have loading symbol which works fine, But when loading symbol opens i can see background and user can edit textbox in backend. I need to disable background, until loading completes. Need to blur background. Tried overlay. Nothing seems to work.
Here is my code.
<style>
.lds-dual-ring.hidden {
display: none;
}
.overlay {
background: rgba(0,0,0,.5);
height: 100vh;
left: 50%;
opacity: 1;
position: fixed;
top: 50%;
transition: all 0.5s;
width: 100%;
z-index: 99000;
}
.lds-dual-ring {
display: inline-block;
height: 80px;
width: 80px;
}
.lds-dual-ring:after {
animation: lds-dual-ring 1.2s linear infinite;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
content: " ";
display: block;
height: 64px;
margin: 5% auto;
width: 64px;
}
##keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div id="loader1" class="lds-dual-ring hidden overlay"></div>
$('#loader1').removeClass('hidden'); //to show
I've recreated a working example of the code you've provided.
Your div contains both overlay and lsd-dual-ring classes. IMO, what you want to achieve is to have the loader ring is inside the overlay div and position at the center of the screen.
.lds-dual-ring.hidden {
display: none;
}
.overlay {
background: rgba(0,0,0,.5);
height: 100vh;
left: 0;
opacity: 1;
position: fixed;
top: 0;
transition: all 0.5s;
width: 100%;
z-index: 99000;
}
.lds-dual-ring {
display: inline-block;
height: 80px;
width: 80px;
top: 50%;
left: 50%;
position: fixed;
}
.lds-dual-ring:after {
animation: lds-dual-ring 1.2s linear infinite;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
content: " ";
display: block;
height: 64px;
margin: 5% auto;
width: 64px;
}
##keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="overlay">
<div id="loader1" class="lds-dual-ring"></div>
</div>
I am making the clone of just dial for practice but i got stuck in sidebar.
It is showing horizontal image instead of vertical on sidebar. Please tell me the
solution so i can proceed.
image : enter image description here
HTML CODE
<aside class="side-border" id="side-border-right">
<div class="right-side"><img src="images/j1.png"</div>
</aside>
CSS CODE
.side-border {
background: none repeat scroll 0 0 #ccc;
bottom: 0;
color: #9ca0a6;
font-size: 11px;
letter-spacing: 0px;
font-weight: 400;
padding: 0 24px;
position: fixed;
text-align: center;
text-transform: uppercase;
top: 0;
white-space: nowrap;
width: 171px;
z-index: 40;
}
.side-border>div {
display: inline-block;
height: 12px;
left: 24px;
line-height: 12px;
margin-top: 150px;
position: absolute;
text-align: center;
top: 50%;
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform-origin: 0 0 0;
-moz-transform-origin: 0 0 0;
-webkit-transform-origin: 0 0 0;
-o-transform-origin: 0 0 0;
width: 300px;
}
.side-border>div.right-side {
left: auto;
right: 34px;
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform-origin: 100% 100% 0;
-moz-transform-origin: 100% 100% 0;
-webkit-transform-origin: 100% 100% 0;
-o-transform-origin: 100% 100% 0;
}
Just use this css in .right-side element. You don't need to use style in the parent element. Although you can use these styles in image also. Look here...
.right-side {position: absolute; right: 0px; top: 50%; transform-origin: 100% 0% 0; transform: rotate(90deg) translateX(50%);}
<div class="right-side"><img src="http://www.cutetravelmate.com/images/priority_shinet1.gif"</div>
I have a div which has two child div's, one div on the screen plan and other vertically perpendicular to the screen.
I try to rotate the div along Y axis for about 30 degrees. keeping its transform-style 3d preserved.
When doing it, in Firefox the border isn't a straight line anymore. It looks like this
For closer view
I happen to use the following code
.holder {
position: relative;
top: 0;
left: 0;
width: 200px;
height: 226px;
perspective: 2000px;
-moz-perspective: 2000px;
}
.box {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 226px;
background-color: transparent;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform: translateZ( -100px ) rotateY(30deg);
-moz-transform: translateZ( -100px ) rotateY(30deg);
transition: transform 0.5s;
-moz-transition: transform 0.5s;
}
.box div {
position: absolute;
margin: 0;
display: block;
}
.box .front {
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: rotateX(0deg) translateZ(10px);
-moz-transform: rotateX(0deg) translateZ(10px);
background-color: grey;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.box .left {
left: 0;
top: 0;
bottom: 0;
width: 20px;
transform: rotateY(-90deg) translateZ(10px);
-moz-transform: rotateY(-90deg) translateZ(10px);
background-color: black;
background-size: cover;
background-position: left;
background-repeat: no-repeat;
}
<div class="holder">
<div class="box">
<div class="front"></div>
<div class="left"></div>
</div>
</div>
Please let me know if I'm missing anything.
Picture of the link provided in one of the answers :
It's a Firefox aliasing problem, you can add
outline: 1px solid transparent;
as a workaround to .box .front.
I got a work around for your issue reference.
Try filter for the div having class="box".
Basically this is used for svg elements but it is working for your case as well.
filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');
Tested in latest version of Opera, FF and Chrome for both mac and windows.
Working Demo here
I'm not sure why using translateZ inside a transformed element is not works properly on FF.
Adding outline: 1px solid transparent; is not working, but adding border: 1px solid transparent; to the .box will working, with removing transform: rotateX(0deg) translateZ(10px); from the .box .front.
Example:
.holder {
position: relative;
top: 0;
left: 0;
width: 200px;
height: 226px;
perspective: 2000px;
-moz-perspective: 2000px;
}
.box {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 226px;
background-color: transparent;
border: 1px solid transparent;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform: translateZ( -100px ) rotateY(30deg);
-moz-transform: translateZ( -100px ) rotateY(30deg);
transition: transform 0.5s;
-moz-transition: transform 0.5s;
}
.box div {
position: absolute;
margin: 0;
display: block;
}
.box .front {
left: 0;
right: -4px;
top: 0;
bottom: 0;
/* transform: rotateX(0deg) translateZ(10px); */
/* -moz-transform: rotateX(0deg) translateZ(10px); */
background-color: grey;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.box .left {
left: 0;
top: 0;
bottom: 0;
width: 20px;
transform: rotateY(-90deg) translateZ(10px);
-moz-transform: rotateY(-90deg) translateZ(10px);
background-color: black;
background-size: cover;
background-position: left;
background-repeat: no-repeat;
}
<div class="holder">
<div class="box">
<div class="front"></div>
<div class="left"></div>
</div>
</div>
Can you guys tell me how to make the hallo text to centre inside the circle?
The circle is not currently working the way it should in IE8 and Firefox.
Does anyone have any ideas / suggestions that could fix this?
I have provided a fiddle
Here is my code below (It is all in my Fiddle above)
CSS
.spinner span em {
border-radius: 999px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}
HTML
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
hallo
</div>
Any help would be great!
To centre your text, use text-align:center for horizontal alignment, and set line-height:300px (with 300px being equal to the element's height) for vertical alignment.
Check this fiddle, I've placed a wrapper div
HTML
<div class="wrapper">
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
</div>
<div class="text">hallo<div>
</div>
CSS
body {
margin: 50px;
}
.wrapper {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.text {
position: absolute;
top:0px;
width: 300px;
height: 300px;
margin: 0 auto;
z-index:10;
text-align:center;
line-height:300px;
}
.spinner {
position: absolute;
width: 300px;
height: 300px;
background: #aaa;
}
.spinner:after {
position: absolute;
content: "";
width: 80%;
height: 80%;
border-radius: 100%;
background: #fff;
top: 10%;
left: 10%;
}
.spinner span em {
background: #0e728e;
-webkit-animation-duration: 3s;
}
/* No need to edit below this line */
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
.spinner {
border-radius: 100%;
position: relative;
}
.spinner span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
}
.spinner span:first-child {
left: 0;
}
.spinner span:last-child {
left: 50%;
}
.spinner span em {
border-radius: 999px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}