UIUX Component

  Alternate for the animation-direction property in CSS to bouncing the box. DEMO CSS .bounce-box { width : 100px ; height : 100px ; background : limegreen ; position : relative ; animation : bouncing 2s infinite; animation - direction : alternate; } @keyframes bouncing { 0 % { background : limegreen ; left : 0px ; top : 0px ;} 50 % { background : orange ; left : 0 ; top : 100px ;} 100 % { background : limegreen ; left : 0px ; top : 0px ;} }

The <marquee> tag is a container tag of HTML is implemented for creating scrollable text or images within a web page from either left to right or vice versa, or top to bottom or vice versa. Marquee speed can be changed using the "scrollmount" attribute. For example, if you are using scrollmount = "1" then it sets the marque to scroll very slowly, and as you increase the "scrollmount," the scrolling speed will also increase. DEMO Scroll Up Scroll Right HTML <marquee direction= "up" scrollamount= "2" > Scroll Up </marquee> <marquee direction= "right" > Scroll Right </marquee>

Smooth animation card effect using box shadow with only CSS animations and a pseudo element. Hover over the box below to see the action. DEMO HTML < div class = "box-shadow" ></ div > CSS . box - shadow { position: relative; display: inline - block; width: 100 px; height: 100 px; border - radius: 5 px; background - color: #fff; box - shadow: 0 1 px 2 px rgba( 0 , 0 , 0 , 0.15 ); transition: all 0.3 s ease - in - out; margin: 1 em; background - color: BlanchedAlmond; } . box - shadow::after { content: '' ; position: absolute; z - index: - 1 ; width: 100 % ; height: 100 % ; opacity: 0 ; border - radius: 5 px; box - shadow: 0 5 px 15 px rgba( 0 , 0 , 0 , 0.3 ); transition: opacity 0.3 s ease - in - out; } . box - shadow:hover { transform: scale( 1.2 , 1.2 ); } . box - shadow:hover::after { opacity: 1 ; }

Cool hover animation effect via transform rotate with value in degree and turn. CSS (Degree) . box { width: 150 px; height: 150 px; margin: 2 em; background: red; } . box:hover { transition - duration: 2 s; transform: rotate( 360 deg); } CSS (Turn) . box { width: 150 px; height: 150 px; margin: 2 em; background: green; } . box:hover { transition - duration: 2 s; transform: rotate( 3 turn); }