| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | title: Modify Fill Mode of an Animation | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | ## Modify Fill Mode of an Animation
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-03-06 04:13:37 +05:30
										 |  |  | ### Solution
 | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-03-06 04:13:37 +05:30
										 |  |  | ```html | 
					
						
							|  |  |  | <style> | 
					
						
							|  |  |  |   button { | 
					
						
							|  |  |  |     border-radius: 5px; | 
					
						
							|  |  |  |     color: white; | 
					
						
							|  |  |  |     background-color: #0F5897; | 
					
						
							|  |  |  |     padding: 5px 10px 8px 10px; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   button:hover { | 
					
						
							|  |  |  |     animation-name: background-color; | 
					
						
							|  |  |  |     animation-duration: 500ms; | 
					
						
							|  |  |  |     animation-fill-mode: forwards; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   @keyframes background-color { | 
					
						
							|  |  |  |     100% { | 
					
						
							|  |  |  |       background-color: #4791d0; | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | </style> | 
					
						
							|  |  |  | <button>Register</button> | 
					
						
							|  |  |  | ``` |