CSS锁定动画是一种可以在网页上添加交互效果的技术。其使用CSS开发，能够让网页上的内容动态地跳动、旋转或缩放，从而增加用户的交互体验和趣味性。

下面是一段CSS代码，可以制作出一个锁定动画效果。用户在点击按钮后，锁定图案将从一侧动态滑入以表明锁定状态的改变。

.lock {
position: relative;
width: 200px;
height: 200px;
background-color: #000000;
overflow: hidden;
}
.lock:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-image: url('lock.png');
background-position: center center;
background-size: 80%;
transition: transform 0.5s ease;
}
.lock.locked:before {
transform: translateX(100%);
}
.button {
width: 100px;
height: 30px;
margin-top: 10px;
background-color: #ffffff;
text-align: center;
line-height: 30px;
cursor: pointer;
}

这段代码中，我们首先定义了一个名为"lock"的 class，用于获取整个锁定图案的容器，并设置其宽度、高度和背景颜色、溢出条件。接着，在该容器中加入一个伪元素，在元素上显示锁定图案的图片，并设置了图片的位置、大小以及过渡时间等属性，实现了滑动动画效果。

然后，我们又定义了一个名为"locked"的 class，当用户点击了"button"按钮后，就给整个"lock"容器添加这个 class，从而触发锁定动画效果。最后，我们再定义了一个按钮组件，并为其添加了点击事件，用于触发锁定动画效果的运行。

以上就是锁定动画的简单制作过程，读者可以通过修改代码中的属性值来改变动画效果的特性。