Get started with css-doodle CDN
MIT licensed
CSS-Doodle is a lightweight library for creating and manipulating CSS animations and transitions.
Tags:- css
- web-components
Stable version
Copied!
How to start using css-doodle CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with css-doodle CDN - cdnhub.io</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-doodle@0.38.4/css-doodle.min.css">
<script src="https://cdn.cdnhub.io/css-doodle/0.38.4/css-doodle.min.js"></script>
</head>
<body>
<svg width="200" height="200">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#blur)"/>
<circle cx="100" cy="100" r="50" fill="red" stroke-width="10" stroke-linecap="round" stroke="white" cssDoodle-animate="{r: '50 100', duration: '2s', easing: 'ease-in-out'}"/>
</svg>
<script>
document.addEventListener('DOMContentLoaded', () => {
const circle = document.querySelector('circle');
circle.cssDoodleAnimate('r', { from: '50', to: '100', duration: '2s', easing: 'ease-in-out' });
});
</script>
</body>
</html>
Copied!
All versions
0.1.0
0.1.1
0.1.2
0.1.3
0.1.4
0.1.5
0.1.6
0.1.7
0.1.8
0.1.9
0.10.0
0.11.0
0.11.1
0.11.2
0.11.3
0.12.0
0.12.1
0.12.2
0.13.0
0.13.1
0.13.10
0.13.2
0.13.3
0.13.4
0.13.5
0.13.6
0.13.7
0.13.8
0.13.9
0.14.0
0.14.1
0.14.2
0.15.0
0.15.1
0.15.2
0.15.3
0.16.0
0.16.1
0.17.0
0.17.1
0.17.2
0.17.3
0.17.4
0.18.0
0.18.1
0.19.0
0.19.1
0.19.2
0.2.0
0.2.1
0.2.2
0.2.3
0.20.0
0.20.1
0.20.2
0.21.0
0.21.1
0.21.2
0.21.3
0.21.4
0.21.5
0.21.6
0.22.0
0.23.0
0.23.1
0.24.0
0.24.1
0.24.2
0.24.3
0.24.4
0.25.0
0.25.1
0.25.2
0.26.0
0.26.1
0.26.2
0.26.3
0.26.4
0.27.0
0.27.1
0.27.2
0.27.3
0.27.4
0.28.0
0.28.1
0.28.2
0.29.0
0.29.1
0.29.2
0.29.3
0.29.4
0.3.0
0.3.1
0.3.2
0.30.0
0.30.1
0.30.10
0.30.2
0.30.3
0.30.4
0.30.5
0.30.6
0.30.7
0.30.8
0.30.9
0.31.0
0.31.1
0.31.2
0.32.0
0.32.1
0.32.2
0.33.0
0.33.1
0.34.0
0.34.1
0.34.10
0.34.11
0.34.2
0.34.3
0.34.4
0.34.5
0.34.6
0.34.7
0.34.8
0.34.9
0.35.0
0.35.1
0.36.0
0.37.0
0.37.1
0.37.2
0.37.3
0.37.4
0.38.0
0.38.1
0.38.2
0.38.3
0.38.4
0.39.0
0.39.1
0.39.2
0.4.0
0.4.1
0.4.10
0.4.11
0.4.2
0.4.3
0.4.4
0.4.5
0.4.6
0.4.7
0.4.8
0.4.9
0.40.0
*** 0.40.1
0.5.0
0.5.1
0.6.0
0.6.1
0.6.2
0.7.0
0.7.1
0.7.2
0.7.3
0.7.4
0.7.5
0.7.6
0.7.7
0.8.0
0.8.1
0.8.2
0.8.5
0.9.0
0.9.1
0.9.2
0.9.3