Fix: zigzag animation duration and delay [TMZ-301](#163)

modules/content/assets/scss/hello-plus-zigzag.scss

@@ -36,6 +36,10 @@
 	--zigzag-animation-delay: 0;
 	--zigzag-animation-duration: 1s;
 
+	--zigzag-animation-duration-slow: 2s;
+	--zigzag-animation-duration-normal: 1s;
+	--zigzag-animation-duration-fast: 0.8s;
+
 	align-items: center;
 	background-color: transparent;
 	display: flex;

modules/content/widgets/zig-zag.php

@@ -1046,26 +1046,24 @@ private function add_box_style_section() {
 		);
 
 		$this->add_control(
-			'animation_duration',
+			'zigzag_animation_duration',
 			[
 				'label' => esc_html__( 'Animation Duration', 'hello-plus' ),
 				'type' => Controls_Manager::SELECT,
-				'default' => '',
 				'options' => [
-					'2s' => esc_html__( 'Slow', 'hello-plus' ),
-					'1s' => esc_html__( 'Normal', 'hello-plus' ),
-					'800ms' => esc_html__( 'Fast', 'hello-plus' ),
+					'slow' => esc_html__( 'Slow', 'hello-plus' ),
+					'normal' => esc_html__( 'Normal', 'hello-plus' ),
+					'fast' => esc_html__( 'Fast', 'hello-plus' ),
 				],
+				'default' => 'normal',
 				'selectors' => [
-					'{{WRAPPER}} .ehp-zigzag' => '--zigzag-animation-duration: {{VALUE}};',
+					'{{WRAPPER}} .ehp-zigzag' => '--zigzag-animation-duration: var(--zigzag-animation-duration-{{VALUE}});',
 				],
-				'prefix_class' => 'animated-',
 				'condition' => [
-					'animation!' => '',
+					'zigzag_animation!' => '',
 				],
 			]
 		);
-
 		$this->add_control(
 			'animation_delay',
 			[
@@ -1078,7 +1076,7 @@ private function add_box_style_section() {
 					'{{WRAPPER}} .ehp-zigzag' => '--zigzag-animation-delay: {{VALUE}}ms;',
 				],
 				'condition' => [
-					'animation!' => '',
+					'zigzag_animation!' => '',
 				],
 				'render_type' => 'none',
 				'frontend_available' => true,