<!DOCTYPE html> <body> <style> @keyframes a { from { color: green } to { color: green } } p { animation-duration: 1s; animation-fill-mode: both } #a { animation-name: a } #c { animation-name: b } </style> <p id=a>First</p> <p> <style scoped> @keyframes a { from { color: blue } to { color: blue } } @keyframes b { from { color: red } to { color: red } } p { animation-name: b } </style> Second </p> <p id=c>Third</p> </body>