CSS Styles AWOL After Applying Animations -
- yes, it's novice question
- yes, tried research it
ok. here's link code... codepen.
<div class="feature container"> <div class="col-md-12"> <h1>welcome keller compensation & hr!</h1> <p>focusing on providing comprehensive compensation , human resources services <br>for small , mid-size companies in variety of industries.</p> <div id="getstarted"> <a href="#">get started</a> </div> </div> </div> so, .get started a supposed have border around it. , did, until added animation. i'd retain during animation , after.
you had "}" before .feature #getstarted a
this should work:
.feature { text-align: center; margin-top: 70px; } .feature #getstarted { margin-top: 40px; position: relative; animation-name: getstrted; animation-duration: 2s; animation-fill-mode: } /* here */ .feature #getstarted { padding: 20px; border: 4px solid; border-radius: 15px; } .feature a:hover { text-decoration: none; background-color: cadetblue; } /* chrome, safari, opera */ @-webkit-keyframes getstrted { 0% { left: -900px } 100% { left: 0px } }
Comments
Post a Comment