#Traitor { text-align: center; font-weight: bold; letter-Spacing: 15px; animation: traitor 5s linear 2; animation-delay: 5s; } #Traitor:hover { animation: shake 2s linear infinite; } @keyframes traitor{ 0% { color: white; } 50% { color: red; } to { color: white; } } h4 { font-family: 'Trebuchet MS', Helvetica, sans-serif; padding-right: 40px; } .our_text2 { font-family: 'Trebuchet MS', Helvetica, sans-serif; padding-left: 35px; } .bez2 { font-family: 'Trebuchet MS', Helvetica, sans-serif; padding-left: 40px; } .urtop { text-align: left; background-color: white; color: black; margin-top: 40px; background: linear-gradient(to left, #14181f 30%, #fff); } .our { text-align: right; background-color: white; color: black; margin-top: 40px; background: linear-gradient(to right, #14181f 30%, #fff); } .our3 { text-align: left; padding-top: 200px; } .our-text { padding-right: 200px; } .bodyContent { background-color: white; } .ticker { position: relative; overflow: hidden; } .ticker__wrapper { display: flex; } .ticker__item { font-family: sans-serif; font-size: 70px; font-weight: 500; white-space: nowrap; flex-shrink: 0; padding: 0 50px; animation: ticker 20s linear infinite; } @keyframes ticker { 0% { transform: translate(0%); } to { transform: translate(-100%, 0); } } #nav { position: sticky; top: 8.15%; min-width: 360px; height: 30px; background-color: #14181f; } #nav, #nav ul { list-style-type: none; } #nav ul { display: none; } #nav li { float: left; display: block; padding: 5px 5px 5px 5px; position: relative; width: auto; text-align: center; background-color: #14181f; } b { text-decoration: none; } #nav li:hover ul { display: block; top: 100%; position: absolute; margin-left: -10px; } #nav li:hover { background-color: black; } @keyframes animationOne { from { opacity: 0; } to { opacity: 1; } } @keyframes text1 { 0% { color: #000; margin-bottom: -40px; } 85% { letter-spacing: 8px; margin-bottom: -40px; } } .block-animation { width: 90px; height: 50px; background-color: #ffb90f; transition: width 1s cubic-bezier(0, 0, 1, 1) 50ms; } .block-animation:hover { width: 590px; background-color: red; animation: shake 0.5s; animation-iteration-count: infinite; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } h1 { font-family: Roboto, Geneva, Arial, Helvetica, sans-serif; } .Traitor { text-align: center; font-weight: bold; letter-Spacing: 15px; } .underline-one { color: #00bfff; /* Цвет обычной ссылки */ position: relative; cursor: pointer; text-decoration: none; /* Убираем подчеркивание */ } .underline-one:after { content: ""; display: block; position: absolute; right: 0; bottom: -3px; width: 0; height: 1px; /* Высота линии */ background-color: black; /* Цвет подчеркивания при исчезании линии*/ transition: width 0.5s; /* Время эффекта */ } .underline-one:hover:after { content: ""; width: 100%; display: block; position: absolute; left: 0; bottom: -1px; height: 1px; /* Высота линии */ background-color: red; /* Цвет подчеркивания при появлении линии*/ transition: width 0.5s; /* Время эффекта */ } .btn { font-weight: 700; color: white; text-decoration: none; padding: .3em 0.5em calc(.3em + 0.5px); background: #262626; transition: 0.2s; margin: 5px; border: solid; border-radius: 0.5px; border-width: 0.5px; border-color: #86c232; transition: width 1s cubic-bezier(0, 0, 1, 1) 500ms; } .btn:hover { background: #86c232; color: black; border: 0.3px; width: 230px; } .btn:active { background: #CD2A19; box-shadow: 0 5px #9B111E inset; } .center { text-align: left; } .link { position: relative; } .link::after { position: absolute; content: ''; left: 0; bottom: 0; display: block; width: 100%; height: 1px; background: #86c232; } .link::after { width: 0; transition: 0.3s; } .link:hover:after { width: 100%; transition: all 0.3s ease; }