Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<title>Tree effects are captured as group style</title>
<style>
* {
box-sizing: border-box;
}
html {
view-transition-name: none;
}
body {
margin: 0;
background: lightpink;
}
@keyframes anim {
to {
border-image: linear-gradient(yellow, green) 20 / 10px;
}
}
.animate {
animation-name: anim;
animation-duration: 1000s;
animation-play-state: paused;
animation-timing-function: steps(2, start);
}
.target {
width: 100px;
height: 100px;
margin: 30px;
background: green;
overflow: hidden;
border: 2px solid;
border-image: linear-gradient(red, blue) 2 / 10px;
}
.at-end.target {
border-image: linear-gradient(yellow, green) 20 / 10px;
}
.override {
border: 8px groove;
outline: none;
border-radius: 2px;
background: grey;
border-image: linear-gradient(green, green) 8 / 3ppx;
animation: none;
}
</style>
<body>
<div class="passthrough target"></div>
<div class="at-end target"></div>
<div class="animate target"></div>
<div class="override target"></div>
</body>