; /*цвет круга*/
--TextColorZoomHover: #000; /*цвет текста по наведению*/
--ImgZoom: url(https://static.tildacdn.one/tild6434-6637-4362-b763-373735626631/Frame_6757785.png), url(https://static.tildacdn.one/tild6434-6637-4362-b763-373735626631/Frame_6757785.png); /*изображение стрелки*/
}
.arrow-zoom .tn-atom {
overflow: hidden !important;
position: relative;
transition-delay: 0.7s !important;
transition: all 2.1s ease-in-out, color 0.2s ease-in-out, background 0s ease-in-out, border-color 1.2s ease-in-out !important;
}
.arrow-zoom .tn-atom:after {
content: '';
position: absolute;
display: inline-block;
width: 40px;
height: 40px;
align-items: center;
right: 5px;
border-radius: 1000px;
background-color: var(--ZoomColor);
background-size: cover;
top: 50%;
transform: translateY(-50%);
transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
}
.arrow-zoom .tn-atom:before {
content: "";
display: inline-block;
height: 12px;
width: 12px;
background-image: var(--ImgZoom);
background-position: -12px 0px, 0px 0px;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
opacity: 1;
transition: opacity 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
right: 18px;
top: 50%;
transform: translateY(-50%);
transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
position: absolute;
z-index: 9;
}
@keyframes buttonArrow-2 {
0% {
background-position: -12px 0px, 0px 0px;
}
100% {
background-position: 0px 0px, 12px 0;
}
}
.arrow-zoom:hover .tn-atom:before {
animation-name: buttonArrow-2;
animation-duration: 0.7s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.84, -0.01, 0.25, 0.99);
opacity: 1;
}
.arrow-zoom:hover .tn-atom:after {
width: 100%;
height: 100%;
right:0;
transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
}
.arrow-zoom .tn-atom {
overflow: hidden;
}
.arrow-zoom div {
display: inline-block;
z-index: 1;
right: 10px;
position: relative;
transition: color 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
margin-right: 15px;
}
.arrow-zoom:hover div {
color: var(--TextColorZoomHover);
}
.arrow-zoom:hover .tn-atom {
background: #EBFF00 !important;
transition: background 2.3s ease-in-out !important;
}
; /*цвет круга*/
--TextColorHover: #000; /*цвет текста по наведению*/
--ImgDot: url(https://static.tildacdn.one/tild3531-6263-4462-a630-393530366431/Frame_6757786.png), url(https://static.tildacdn.one/tild3531-6263-4462-a630-393530366431/Frame_6757786.png); /*цвет текста по наведению*/
}
.dot-scale .tn-atom {
overflow: hidden !important;
position: relative;
transition: all 1.2s ease-in-out, color 0.2s ease-in-out, background 0s ease-in-out, border-color 1.2s ease-in-out !important;
}
.dot-scale:hover .tn-atom {
transition-delay: 0.2s;
background: var(--DotColor) !important;
transition: background 2.3s ease-in-out !important;
}
.dot-scale .tn-atom:after {
content: '';
position: absolute;
display: inline-block;
width: 10px;
height: 10px;
align-items: center;
right: 15px;
border-radius: 1000px;
background-color: var(--DotColor);
background-size: cover;
top: 50%;
transform: translateY(-50%);
transition: transform 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
}
.dot-scale .tn-atom:before {
content: "";
display: inline-block;
height: 12px;
width: 12px;
background-image: var(--ImgDot);
background-position: 0 0px, -12px -12px;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
right: 15px;
top: 50%;
transform: translateY(-50%);
position: absolute;
z-index: 9;
animation-name: buttonArrow;
animation-duration: 0.7s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.84, -0.01, 0.25, 0.99);
}
@keyframes buttonArrow {
0% {
background-position: 0 0px, -12px 12px;
}
100% {
background-position: 12px -12px, 0 0;
}
}
.dot-scale:hover .tn-atom:before {
opacity: 1;
}
.dot-scale:hover .tn-atom:after {
transform: scale(50);
}
.dot-scale .tn-atom {
overflow: hidden;
}
.dot-scale div {
display: inline-block;
z-index: 1;
position: relative;
transition: color 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
margin-right: 15px;
}
.dot-scale:hover div {
color: var(--TextColorHover);
}