The following code implements a photo cutting animation in CSS. It creates a visual effect of a photo being sliced by a sword. The code utilizes HTML and CSS to define the structure and styling of the animation.
The animation consists of a square element representing the photo, a sword element with a blade and a handle, and various keyframes to animate the different elements. The blade is designed with a gradient background and a clip-path to achieve the slicing effect.
The animation includes movements such as shaking, chopping, and fading effects applied to the elements, creating an engaging visual experience. The background color of the animation also changes dynamically during the animation.
This code can be helpful for web developers and designers who want to incorporate interactive and visually appealing animations into their websites. It demonstrates how to use CSS animations and keyframes to achieve complex visual effects. Feel free to use and modify this code to enhance your projects.
How to Create Photo Cutting Animation in CSS
Create the HTML structure for the animation as follows:
<div class="square">
<div class="sword">
<div class="blade"></div>
<div class="handle"></div>
</div>
</div>
Style using the following CSS styles:
:root {
--size: 45vmin;
--dur: 4.2s;
--ease: cubic-bezier(0.165, 0.84, 0.44, 1);
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body , .cd__main{
display: grid;
place-items: center;
overflow: hidden;
-webkit-animation: bg-color var(--dur) var(--ease) infinite;
animation: bg-color var(--dur) var(--ease) infinite;
}
.sword {
position: absolute;
bottom: 25%;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
transform: rotate(-5deg);
z-index: 2;
transform-origin: 0 100%;
-webkit-animation: chop var(--dur) var(--ease) infinite;
animation: chop var(--dur) var(--ease) infinite;
}
.blade {
--color-1: #e7e7e7;
--color-2: #f3f3f3;
width: calc(var(--size) / 5);
height: calc(var(--size) / 1.25);
position: relative;
background-image: linear-gradient(to right, var(--color-1), var(--color-1) 50%, var(--color-2) 50%, var(--color-2) 100%);
box-shadow: inset -1vmin 0 4vmin rgba(0, 0, 0, 0.075);
-webkit-clip-path: polygon(50% 0%, 100% 15%, 100% 100%, 0 100%, 0% 15%);
clip-path: polygon(50% 0%, 100% 15%, 100% 100%, 0 100%, 0% 15%);
-webkit-animation: blade-glow var(--dur) var(--ease) infinite;
animation: blade-glow var(--dur) var(--ease) infinite;
}
.handle {
position: relative;
width: calc(var(--size) / 8);
height: calc(var(--size) / 3);
background-color: #363636;
border-radius: 0 0 0.5vmin 0.5vmin;
box-shadow: inset 0 5vmin 2vmin rgba(0, 0, 0, 0.35), inset 2.5vmin 0 3vmin rgba(0, 0, 0, 0.35);
}
.handle:after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: calc(var(--size) / 2.75);
height: calc(var(--size) / 20);
background-color: inherit;
transform: translateX(-50%);
box-shadow: inset 1vmin -1vmin 2.5vmin rgba(0, 0, 0, 0.35);
-webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}
.square {
position: relative;
width: var(--size);
height: var(--size);
perspective: 100vw;
-webkit-animation: shake var(--dur) linear infinite;
animation: shake var(--dur) linear infinite;
}
.square:before,
.square:after {
content: "";
position: absolute;
top: 0;
background-image: url(https://iili.io/HWX0k6N.jpg);
background-size: cover;
width: 100%;
height: 100%;
transform: translateX(100vw);
transform-origin: 0 100%;
}
.square:before {
-webkit-clip-path: polygon(26% 0, 76% 100%, 0 100%, 0 0);
clip-path: polygon(26% 0, 76% 100%, 0 100%, 0 0);
z-index: 1;
-webkit-animation: square-left var(--dur) var(--ease) infinite, fade-out var(--dur) var(--ease) infinite;
animation: square-left var(--dur) var(--ease) infinite, fade-out var(--dur) var(--ease) infinite;
}
.square:after {
-webkit-clip-path: polygon(100% 0, 100% 100%, 75% 100%, 25% 0);
clip-path: polygon(100% 0, 100% 100%, 75% 100%, 25% 0);
z-index: 3;
-webkit-animation: square-right var(--dur) var(--ease) infinite, fade-out var(--dur) var(--ease) infinite;
animation: square-right var(--dur) var(--ease) infinite, fade-out var(--dur) var(--ease) infinite;
}
@-webkit-keyframes square-left {
26% {
transform: translateX(0);
}
100% {
transform: translate(-5%, -5%) rotate(-1deg);
}
}
@keyframes square-left {
26% {
transform: translateX(0);
}
100% {
transform: translate(-5%, -5%) rotate(-1deg);
}
}
@-webkit-keyframes square-right {
26% {
transform: translateX(0);
}
100% {
transform: translate(5%, 5%) rotate(2deg);
}
}
@keyframes square-right {
26% {
transform: translateX(0);
}
100% {
transform: translate(5%, 5%) rotate(2deg);
}
}
@-webkit-keyframes fade-out {
88% {
opacity: 1;
}
94%, 100% {
opacity: 0;
}
}
@keyframes fade-out {
88% {
opacity: 1;
}
94%, 100% {
opacity: 0;
}
}
@-webkit-keyframes chop {
25% {
transform: translate(-10%, -20%) rotate(-15deg);
}
26%, 30% {
transform: translate(5%, 6%) rotate(125deg);
z-index: 2;
}
42%, 80% {
transform: translate(10%, 5%) rotate(120deg);
z-index: 4;
}
100% {
z-index: 4;
}
}
@keyframes chop {
25% {
transform: translate(-10%, -20%) rotate(-15deg);
}
26%, 30% {
transform: translate(5%, 6%) rotate(125deg);
z-index: 2;
}
42%, 80% {
transform: translate(10%, 5%) rotate(120deg);
z-index: 4;
}
100% {
z-index: 4;
}
}
@-webkit-keyframes bg-color {
25.25% {
background-color: white;
}
25.251%, 88% {
background-color: black;
}
}
@keyframes bg-color {
25.25% {
background-color: white;
}
25.251%, 88% {
background-color: black;
}
}
@-webkit-keyframes square-color {
25.25% {
background-color: dodgerblue;
}
25.251%, 100% {
background-color: crimson;
}
}
@keyframes square-color {
25.25% {
background-color: dodgerblue;
}
25.251%, 100% {
background-color: crimson;
}
}
@-webkit-keyframes shake {
0%, 25% {
filter: blur(0);
}
25.5% {
filter: blur(1vmin);
}
26% {
transform: translateX(-2%);
filter: blur(0);
}
28% {
transform: translateX(2%) scale(0.98);
}
29% {
transform: translateX(-3%);
}
30% {
transform: translateX(1%);
}
31% {
transform: translateX(0);
}
}
@keyframes shake {
0%, 25% {
filter: blur(0);
}
25.5% {
filter: blur(1vmin);
}
26% {
transform: translateX(-2%);
filter: blur(0);
}
28% {
transform: translateX(2%) scale(0.98);
}
29% {
transform: translateX(-3%);
}
30% {
transform: translateX(1%);
}
31% {
transform: translateX(0);
}
}
That’s all! hopefully, you have successfully created a photo cutting animation in CSS. If you have any questions or suggestions, feel free to comment below.
Amazing animation