# Bone Flow #122 KeyFrame HTML Functional Class

Class: `bf-keyframe`  
Functional Class Runtime: 1.0.0  
Required Runtime: BoneKeyFrame 1.0.0

```html
<div class="bf-keyframe">
  <div class="bf-keyframe-point" data-offset="0" data-x="0" data-y="0" data-rotation="0" data-scale="1" data-opacity="1" data-color="#49D9FF"></div>
  <div class="bf-keyframe-point" data-offset="50" data-x="90" data-y="-20" data-rotation="180" data-scale="1.35" data-opacity="0.65" data-color="#FFD166"></div>
  <div class="bf-keyframe-point" data-offset="100" data-x="180" data-y="0" data-rotation="360" data-scale="1" data-opacity="1" data-color="#55E6A5"></div>
</div>
```

`bf-keyframe` maps declarative KeyFrame points into BoneKeyFrame Runtime state. It does not perform animation playback or interpolation.